如何通过切换使按钮跟随div滑块

Question

我正在创建一个导航栏，当我点击一个按钮时，它会切换。这是完成了，但我的按钮是固定在相同的位置，我想让它跟随我的滑动导航栏的移动。我该怎么做呢？

​

$(document).ready(function() {
  $("#flip").click(function() {
    $("#panel").slideToggle("slow");
  });
});

.main_menu {
  position: fixed;
  top: 0;
  background-color: #358ef3;
  height: 9rem;
  width: 100%;
}

.wideScreen {
  margin-top: -0.625rem;
  width: 4rem;
  height: 1rem;
  position: fixed;
  top: 9rem;
  left: 0;
}

.wideScreen>button {
  width: 100%;
  height: 100%;
}

.wideScreen>button>img {
  width: 100%;
  height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main_menu" id="panel">
  <form class="" action="index.html" method="post">
    <div class="slidecontainer">
      <h2>Bac+: <span id="output"></span></h2>
      <label for="myRange"></label><input type="range" min="1" max="8" value="0" class="slider" id="myRange">
    </div>
  </form>
</div>
<div class="wideScreen">
  <button id="flip">
    </button>
</div>

​

Answer 1

有什么原因按钮不能放在它所属的元素(标题)中吗？

​

$(document).ready(function() {
    $("#flip").click(function() {
        $("#panel-inner").slideToggle("slow");
    });
});

body {
    padding: 0;
    margin: 0;
}

#panel {
    position: fixed;
    top: 0;
    width: 100%;
}

.main_menu {
    background-color: #358ef3;
    height: 9rem;
    overflow: hidden;
}

.wideScreen {
    width: 4rem;
    height: 1rem;
}

.wideScreen>button {
    width: 100%;
    height: 100%;
}

.wideScreen>button>img {
    width: 100%;
    height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="panel">
    <div id="panel-inner" class="main_menu">
        <form class="" action="index.html" method="post">
            <div class="slidecontainer">
                <h2>Bac+: <span id="output"></span></h2>
                <label for="myRange"></label>
                <input type="range" min="1" max="8" value="0" class="slider" id="myRange">
            </div>
        </form>
    </div>

    <div class="wideScreen">
        <button id="flip">
        </button>
    </div>
</div>

​

Answer 2

替换以下CSS规则

.wideScreen {
  margin-top: -0.625rem;
  width: 4rem;
  height: 1rem;
  position: fixed;
  top: 9rem;
  left: 0;
}

使用

.wideScreen {
  margin-top: -0.625rem;
  width: 4rem;
  height: 1rem;
 top: 9rem;
  left: 0;
}

这个问题是由于固定的位置造成的。