Minimalist Sticky Header Navigation Using jQuery and CSS

A dead simple jQuery based sticky header navigation solution that detects how far user has scrolled down and make your navigation menu sticky by adding the 'fixed' CSS class to it.

How to use it:

1. Create a navigation menu using Html unordered list.

<ul class ="menu">
  <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>
  <li><a href="#">Link 5</a></li>
</ul>

2. Load the necessary jQuery JavaScript library at the bottom of the webpage.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

3. The core JavaScript to make your navigation menu sticky as you scroll down the page.

$(function() {

  var menu = $('.menu');
  var menuOffset = menu.offset().top;

  $(window).on('scroll', function() {
    var pageScroll = $(window).scrollTop();
    if(menuOffset <= pageScroll) {
      menu.addClass('fixed');
    }
      else {
        menu.removeClass('fixed');
      }
  });

});

4. The required CSS styles for the sticky navigation.

.fixed {
  position: fixed;
  top: 0;
  overflow: hidden;
}

5. Style the sticky navigation whatever you like.

.menu {
 ...

.menu li {
  ...
}

.menu a {
  ...
}

 

---

This awesome jQuery plugin is developed by MarkShakespeare. For more Advanced Usages, please check the demo page or visit the official website.