This is an easy way to make a navigation menu that sticks to top of the window while scrolling down the page. We want the menu to stick to the top only after we've scrolled down further than its original position. A few lines of jQuery will to the trick. Here is the markup:
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="demo_top_wrapper">
<!-- a header with a logo just to have some content before the menu -->
<div id="demo_top">
<div class="demo_container">
<div id="my_logo">Our logo</div>
</div>
</div>
<!-- this will be our navigation menu -->
<div id="sticky_navigation_wrapper">
<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>
</div>
</div><!-- #demo_top_wrapper -->
<!-- some other content should go here, in order to have a scrollbar -->
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; }
/* our menu styles */
#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
$(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();
});
});
This awesome jQuery plugin is developed by backslash. For more Advanced Usages, please check the demo page or visit the official website.