Create an Auto-Hiding Sticky Header with Headroom.js

Auto-hiding headers have been steadily popular in web design for quite a while. Many blogs and online magazines use the sticky header to keep users engaged and give them direct access to the navigation.

Medium has redefined this feature with a basic concept that hides the navigation while scrolling down but shows it while scrolling up. This concept has become a wildly popular trend and now you can easily replicate it using Headroom.js.

Headroom.js is a free vanilla JavaScript library with no dependencies or excessive API features. You just add it to your HTML, target the page header, and let it run.

Headroom simply adds and removes certain CSS classes that animate in order to show/hide the header using JavaScript to detect the motion.

You could make this functionality yourself but why bother? Headroom is tested and supports all major browsers. It even plays nice with jQuery or Zepto if you already have a JS library installed on your site.

You’ll find plenty of code samples in the GitHub repo but here’s a simple example that targets the #header element:

var myElement = document.querySelector("#header");

// create a Headroom object passing in the #header element
var headroom  = new Headroom(myElement);

// initialize the library
headroom.init();

The init() function has plenty of options to customize. You can customize the different element classes, along with different event trigger callbacks where you can embed your own functions. For instance, if you want the element to fade after it’s unpinned you would use the onUnpin callback.

These options are all listed on the main plugin page, so check it out and see what you think. If you want to see Headroom in action have a look at the pen below that contains a full clone of the main demo page.