Simple Sticky Header Navigation With jQuery

File Size: 19.1 KB
Views Total: 5742
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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">
    <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>

2. Place jQuery library and the Simple Sticky Header plugin's script at the end of the document.

<script src="//"></script>
<script src="simple-sticky-header.js"></script>

3. Call the function on the navigation menu.

$(function() {

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.