This time I will share jQuery Plugin and tutorial about Simple Sticky Header Navigation With jQuery, hope it will help you in programming stack.
A really simple jQuery plugin to create a sticky header navigation that automatically adds a CSS class (sticky-header) to the nav menu as you scroll past it.
How to use it:
1. Create a normal navigation menu for your webpage.
3 |
<li><a href="#">Link 1</a></li> |
4 |
<li><a href="#">Link 2</a></li> |
5 |
<li><a href="#">Link 3</a></li> |
6 |
<li><a href="#">Link 4</a></li> |
2. Place jQuery library and the Simple Sticky Header plugin’s script at the end of the document.
1 |
<script src="//code.jquery.com/jquery-1.12.4.min.js"></script> |
2 |
<script src="simple-sticky-header.js"></script> |
3. Call the function on the navigation menu.
2 |
$("#sticky-header").simpleStickyHeader(); |
4. Stick the navigation menu to the top of the screen as you scroll down the webpage.
This awesome jQuery plugin is developed by oenstrom. For more Advanced Usages, please check the demo page or visit the official website.
