Super Tiny jQuery Sticky Navigation Menu Plugin
File Size: | 5.73 KB |
---|---|
Views Total: | 4576 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

A super simple and easy-to-use jQuery plugin that makes your navigation menu sticky when scrolling down the web page.
Related plugins:
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.