Smooth Auto-Hide Header Navigation with jQuery and CSS3

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

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. { 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="//"></script> 

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

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

        if (scrolled > scroll){
        } else {
      scroll = $(document).scrollTop();  

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