Top Bar Scroll Problem

HTML

<div class="header"> This is the header bar<br>It will follow as you scroll</div>
<div class="scrollcontent">
  Instructions: <br>
  <ol><li>Click on "click for part 2" and observe that the "part 2 is here" text" is visible at the top.</li>

  <li>Then, go back to the top and click on "Enable Header Bar float" and click on the "part 2" link again. Observe that the "part 2 is here" text is no longer visible at the top, you have to scroll up for it.</li>
  </ol>
  <a class=toggle onClick='togglemoveheader()' id="mh">Enable Header Bar Float</a><br>
  <a href="#part2">click for part 2</a><br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br><br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <a name="part2"></a>
  |-------------------------------part 2 is here<br>
  <br>
  <br>
  <br>
  |-------------------------------This is below part 2 it should not be covered up.
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>abc 
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  end


</div>

CSS

body { padding: 0; margin: 0; }
.header {
  background: #fff;
  height: 40px;
}
.scrollcontent {
  position: absolute;
  width: 100%;
  height: calc(100% - 40px);
  overflow: auto;
}

JavaScript

var moveheader=false;

function togglemoveheader()
{
   moveheader = !moveheader;
   endis = (moveheader) ? "Disable" : "Enable";
 	 $("#mh").text( endis + " Header Bar Float");
 }
 
$(window).scroll(function(){
    if (moveheader){
    if ($(window).scrollTop() >= 100)
    {
        $("#floatbar").css({position:'fixed',top:'0'});
        $(".summary").css({margin: '0'});
    }
    else
    {
        $("#floatbar").css({position: 'absolute'});
        $(".summary").css({margin: '8 px 0'});
    }
    }
});