How do I make my toggle button scroll up slightly when I scroll down the page?

Question

I am making a website that will have multiple pages and each page will potentially be long so at first I wanted a way to have access to menus and stuff in a sidebar. But then I changed my nav so that it isn't fixed any more and so scrolling down the page now looks weird because the toggle is quite low down the page (due to being below the nav at the top of the page). Sow how do I get the toggle, sidebar and content to scroll up to the top of the page and then have both the toggle and sidebar then become fixed as the content side is being scrolled?.

It may be a simple solution but I cant think of how to do it and the only solution I could find was this, which actually looks quite good but is a bit too much for something so little right?

This is what I have at the moment

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>