Simple Sticky Header Navigation With jQuery
File Size: | 19.1 KB |
---|---|
Views Total: | 5728 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.
<nav class="navbar"> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> </ul> </nav>
2. Place jQuery library and the Simple Sticky Header plugin's script at the end of the document.
<script src="//code.jquery.com/jquery-1.12.4.min.js"></script> <script src="simple-sticky-header.js"></script>
3. Call the function on the navigation menu.
$(function() { $("#sticky-header").simpleStickyHeader(); });
4. Stick the navigation menu to the top of the screen as you scroll down the webpage.
.sticky-header { position: fixed; top: 0; left: 0; }
This awesome jQuery plugin is developed by oenstrom. For more Advanced Usages, please check the demo page or visit the official website.