Sticky navigation top bar – jquery

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% }