Simple Sticky Header Navigation With jQuery

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.