当我向下滚动页面时，如何使我的切换按钮略微向上滚动？

Question

我正在建立一个有多个页面的网站，每个页面可能很长，所以一开始我想要一种方法来访问侧边栏中的菜单和内容。但后来我更改了我的导航，因此它不再固定，因此向下滚动页面现在看起来很奇怪，因为切换在页面下方非常低（由于低于页面顶部的导航）。播种如何让切换，侧边栏和内容滚动到页面顶部，然后在内容端滚动时让切换和侧边栏都固定。

这可能是一个简单的解决方案，但我无法想到如何做到这一点，我能找到的唯一解决方案是this，实际上看起来相当不错，但是对于那么小的事情来说有点太多了吗？ / p>

这就是我现在所拥有的

html,
body {
  margin: 0;
  padding: 0;
  border: 0;
}
a {
  display: inline-block;
  padding: 1em;
  text-decoration: none;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 0 5px 5px 0;
}
#A,
#B {
  position: absolute;
  transition: all 700ms;
}
#A {
  top: 0px;
  width: 200px;
  bottom: 0px;
  background: orange;
}
#B {
  top: 0px;
  left: 200px;
  right: 0;
  bottom: 0px;
  background: green;
}
/*Hide the checkbox*/

#toggle {
  display: none;
}
label {
  position: relative;
  /*Set the left position to the same as the sidebar */
  left: 200px;
  top: 100px;
  margin: 5px;
  z-index: 2;
  transition: all 700ms;
  background: #FFF;
  padding: 4px 6px;
  background: orange;
}
/* Initial sidebar state */

#toggle ~ #A {
  left: 0;
}
/*move both containers on toggle*/

#toggle:checked ~ #A,
#toggle:checked ~ #B {
  left: -200px;
}
/*move label to follow sidebar animation*/

#toggle:checked,
#toggle:checked ~ label {
  left: 0;
  background: #FFF;
}

<div id="A"></div>
<input id="toggle" type="checkbox">
<label for="toggle">menu</label>
<div id="B"></div>