We had a team of people review one of the new sites (http://www.glenbridgepublishing.com/) that we had developed and one of the biggest complaints was scrolling. On most sites when you scroll the page you lose the menu bar and you find that you often have to scroll all the way back top of the page. Using jQuery it is very easy to lock the head of your document so that it re-appears when the user scrolls down the page.This is implemented on our site, so you are seeing a live example. What we wanted to do was share how this was done.
The first step is adding the javascript into the head of your webpage:
<script>
jQuery().ready(function() {
var $scrollingDiv = jQuery("#scrollingDiv");
jQuery(window).scroll(function(){
$scrollingDiv
.stop()
.animate({"marginTop": (jQuery(window).scrollTop() + 0) + "px"}, "slow" );
});
});
</script>
The next step is adding a div around the head div that contains your menu:
<div id="scrollingDiv" style="position:absolute;z-index:400;width:100%">
<div id="header">
<div class="container">
</div>
</div>
</div>
Finally you need to add padding to your content area so that there is room at the top of the page for your header div.
<div id="main" style="padding-top:165px">