Super Tiny jQuery Sticky Navigation Menu Plugin

A super simple and easy-to-use jQuery plugin that makes your navigation menu sticky when scrolling down the web page.

Related plugins:

• Sticky Top Menu Bar with CSS3
• Fixed Position Top Menu Bar with jQuery and CSS3 - nagging-menu

How to use it:

1. Include jQuery library on the web page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

2. Create a navigation menu

<div id="sticky_navigation">
<div class="demo_container">
<ul>
<li><a href="#" class="selected">HOME</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">CLIENTS</a></li>
<li><a href="#">PARTNERS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
</div>

3. The CSS

.demo_container {
width: 980px;
margin: 0 auto;
}
#demo_top_wrapper {
margin: 0 0 20px 0;
}
#demo_top {
height: 100px;
padding: 20px 0 0 0;
}
#my_logo {
font: 70px Georgia, serif;
}
#sticky_navigation_wrapper {
width: 100%;
height: 50px;
}
#sticky_navigation {
width: 100%;
height: 50px;
background: url(trans-black-60.png);
-moz-box-shadow: 0 0 5px #999;
-webkit-box-shadow: 0 0 5px #999;
box-shadow: 0 0 5px #999;
}
#sticky_navigation ul {
list-style: none;
margin: 0;
padding: 5px;
}
#sticky_navigation ul li {
margin: 0;
padding: 0;
display: inline;
}
#sticky_navigation ul li a {
display: block;
float: left;
margin: 0 0 0 5px;
padding: 0 20px;
height: 40px;
line-height: 40px;
font-size: 14px;
font-family: Arial, serif;
font-weight: bold;
color: #ddd;
background: #333;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
#sticky_navigation ul li a:hover, #sticky_navigation ul li a.selected {
color: #fff;
background: #111;
}

4. The javascript

<script>
$(function() {

// grab the initial top offset of the navigation 
var sticky_navigation_offset_top = $('#sticky_navigation').offset().top;

// our function that decides weather the navigation bar should have "fixed" css position or not.
var sticky_navigation = function(){
var scroll_top = $(window).scrollTop(); // our current vertical position from the top

// if we've scrolled more than the navigation, change its position to fixed to stick to top, otherwise change it back to relative
if (scroll_top > sticky_navigation_offset_top) { 
$('#sticky_navigation').css({ 'position': 'fixed', 'top':0, 'left':0 });
} else {
$('#sticky_navigation').css({ 'position': 'relative' }); 
}   
};

// run our function on load
sticky_navigation();

// and run it again every time you scroll
$(window).scroll(function() {
 sticky_navigation();
});

// NOT required:
// for this demo disable all links that point to "#"
$('a[href="#"]').click(function(event){ 
event.preventDefault(); 
});

});
</script>

---

This awesome jQuery plugin is developed by backslash. For more Advanced Usages, please check the demo page or visit the official website.