Smooth Auto-Hide Header Navigation with jQuery and CSS3

A jQuery/CSS solution to create a fixed header navigation that auto hides when you scroll down, however when you scroll up it would show itself again. With a smooth sliding effect using CSS3 transitions.

How to use it:

1. Create a header navigation for your website.

<header class="page-header">
  ...
</header>

2. The CSS to make it sticky at the top of the web page.

.page-header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  box-sizing: border-box;
  -webkit-transition: top 0.6s;
  -moz-transition: top 0.6s;
  transition: top 0.6s;
}

3. The CSS to make the header navigation hidden when page scrolled down.

.page-header.off-canvas { top: -89px; }

4. The CSS to reveal the header navigation when page scrolled up.

.page-header.fixed {
  top: 0;
  z-index: 9999;
}

5. Include the latest version of jQuery library at the end of the web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

6. Detect the scroll events and add/remove appropriate CSS classes to reavel/hide the header navigation.

(function($){
  $(function(){  
    var scroll = $(document).scrollTop();
    var headerHeight = $('.page-header').outerHeight();
    
    $(window).scroll(function() {
      var scrolled = $(document).scrollTop();
      if (scrolled > headerHeight){
        $('.page-header').addClass('off-canvas');
      } else {
        $('.page-header').removeClass('off-canvas');
      }

        if (scrolled > scroll){
         $('.page-header').removeClass('fixed');
        } else {
        $('.page-header').addClass('fixed');
        }             
      scroll = $(document).scrollTop();  
     });
       
   });
})(jQuery); 

---

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