Stick the menu to the top of the page on scroll down

Just a little something I wanted to try. Scroll down the page and watch the menu above stick to the top so it’s always accessible.

Here’s the code used:

 

<script type="text/javascript">// <![CDATA[ var fixed_menu_hidden = true; function dtbaker_scroll(){     var scrollTop = jQuery(window).scrollTop();     if(scrollTop>80){         if(fixed_menu_hidden){             jQuery('#fixednav').fadeIn();             fixed_menu_hidden = false;         }     }else{         jQuery('#fixednav').fadeOut();         fixed_menu_hidden = true;     } } window.onscroll = dtbaker_scroll; jQuery(function(){     jQuery('body').prepend('<div id="fixednav"><div></div></div>');     jQuery('#fixednav div').html(jQuery('.navbar-fixed-top').clone()); }); // ]]></script> <style type="text/css"> #fixednav{     position:fixed;      left:0;      right:0;      top:0;      height:39px;      background:#13B8D6;      display:none;      z-index:300; } </style>

[raw]

[/raw]

Leave a Reply

Your email address will not be published. Required fields are marked *