jQuery Plugin For Sticky Top Navigation Menu - stickUp

stickUp is yet another jQuery menu plugin that makes your navigation menu sticky at the top of your page when scrolling down the window. The plugin also provides a "One Pager" anchor functionality for your sticky navbar to let the user know what they are currently viewing on the page. By using CSS the sticky navigation menu item will be highlighted as it's correlating content is crolled in and out of view.

See also:

• jQuery Plugin For Sticky Header Elements  - clingify
• jQuery Plugin For iOS List-Style Sticky Headers - Stacks
• Fixed Position Top Menu Bar with jQuery and CSS3 - nagging-menu
• Sticky Top Menu Bar with CSS3

Basic Usage:

1. Load the jQuery javascript library and jQuery stickup plugin in your web page.

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

2. Create a navigation menu with a class name of 'navbar'.

<nav class="navbar" role="navigation">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</nav>

3. Call the plugin and you're done.

<script type="text/javascript">
jQuery(function($) {
$(document).ready( function() {
$('.navbar').stickUp();
});
});
</script>

4. Style your menu aspect simply by changing it's CSS.

---

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