Top Bar Scroll Problem

HTML

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>
<div id=floatbar class=header> This is the header bar<br>It will follow as you scroll</div>
<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

CSS

body {
  
  padding-top:40px;
  
}

.header {
    position:absolute;
    top:0px;
    background-color: blue;
    border: 1px solid #124191;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    margin-bottom: 0.5em;
    color: white;
/*font-weight: bold;*/
}
A.toggle { color: blue; font-weight: normal; cursor:pointer;}
.dontcare {color: lightgray}

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'});
    }
    }
});