How to Hide Header on Scroll Down & Show on Scroll Up

Recently I was looking for ways to improve the usability of some of my blogs. That’s when I came around this idea implemented on many of the top websites like Medium.com.

Compared to a static header, a fixed header has many advantages. It makes navigation easier for your visitors. If you visit YouTube or Facebook from a desktop device, you can see that they are using a fixed header.

However, it may not be the best solution always. A fixed header takes up a chunk of the screen area on smaller devices. So, the best solution is to create a header or Navbar that slides up when the user scrolls down and slides down when he starts scrolling back to top.

Watch Video

By playing this video, you agree to YouTube's Terms

Watch on YouTube →

Our Objectives

• Hide header when the user scrolls down
• Hide only if the scroll amount is greater than the height of the header (to avoid blank space).
• Show it back when he/she starts scrolling back to the top

Javascript Code

(function(){

  var doc = document.documentElement;
  var w = window;

  var prevScroll = w.scrollY || doc.scrollTop;
  var curScroll;
  var direction = 0;
  var prevDirection = 0;

  var header = document.getElementById('site-header');

  var checkScroll = function() {

    /*
    ** Find the direction of scroll
    ** 0 - initial, 1 - up, 2 - down
    */

    curScroll = w.scrollY || doc.scrollTop;
    if (curScroll > prevScroll) { 
      //scrolled up
      direction = 2;
    }
    else if (curScroll < prevScroll) { 
      //scrolled down
      direction = 1;
    }

    if (direction !== prevDirection) {
      toggleHeader(direction, curScroll);
    }

    prevScroll = curScroll;
  };

  var toggleHeader = function(direction, curScroll) {
    if (direction === 2 && curScroll > 52) { 

      //replace 52 with the height of your header in px

      header.classList.add('hide');
      prevDirection = direction;
    }
    else if (direction === 1) {
      header.classList.remove('hide');
      prevDirection = direction;
    }
  };

  window.addEventListener('scroll', checkScroll);

})();

What it does

First, we calculate the initial scroll position and assign it to the variable prevScroll. Also, we initiate a variable direction with value zero.

The function checkScroll()

The function checks the current scroll position and saves it to the variable curScroll Then we check its value against the previous scroll position to find whether the user has scrolled up or down. We assign the value to the variable direction.

For better performance, we want to toggle the visibility of the header only if the direction of scrolling has changed. So we compare the current direction against the previous direction and call the function toggleHeader accordingly.

The function toggleHeader()

This function receives the direction and scroll amount as parameters. It adds the class hide when the direction is down and scroll amount is greater than 52px (the header height). Otherwise, it removes the class hide.

Essential CSS

#site-header {
    position: fixed;
    height: 52px;
    background: #fff;
    top: 0;
    width: 100%;
    z-index: 100;
    transition: all .3s ease;
    box-shadow: 0 1px 25px rgba(0,0,0, .1);
}
#site-header.hide {
    top: -53px;
}

The CSS is straightforward. You can modify the styling to your liking.