jQuery Plugin For Sticky Top Navigation Menu - stickUp

jQuery Plugin For Sticky Top Navigation Menu - stickUp
File Size: 271KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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.