We are using exact the same code on this site.
Basic structure:
<div> <!-- Ad here, logo or whatever --> </div> <div class="site-navi"> <!-- sticky navigation here --> <ul id="nav"> <li><a href="/">Home</a></li> ... ... </ul> </div>
Jquery code:
$(function() { var sticky_nav_offset = $('.site-navi').offset().top; var sticky_nav = function(){ var scroll_top = $(window).scrollTop(); if (scroll_top > sticky_nav_offset) { $('.site-navi').css({ 'position': 'fixed', 'top':0, 'left':0 }); } else { $('.site-navi').css({ 'position': 'relative' }); } }; sticky_nav(); $(window).scroll(function() { sticky_nav(); }); });
and CSS:
.site-navi { width:100% }