Handle sticky header finely with Headroom.js

Headroom.js is a Javascript framework, it means no dependency of jQuery or any other framework to use. However you can still initialize it with jQuery or Zepto. With the popularity of sticky headers that provide ease-of-navigation to users, but still those large sticky headers that I discussed before are a negative point of a design. So why not to use Headroom.js
Headroom creates a specified area to which header stays sticky and visible, but as the user scrolls down the area, header hides but when user start to scroll up the header start to visible.

Well there are three steps in which this plugin works. First is when header is fixed and is under the room where is stays visible. In this state the header have class headroom (according to default settings):

<header class="headroom">

Second state is when header crosses the room and enter the body, where it hides on scroll down. In this state it have classes headroom headroom--unpinned (according to default settings):

<header class="headroom headroom--unpinned">

Third state is when you scroll up and header start to show. In this state it have classes headroom headroom--pinned  (according to default settings):

<header class="headroom headroom--pinned">

DEMO 

See the Pen Headroom.js demo by Nick Williams (@WickyNilliams) on CodePen.

The options and callback function are listed on Headroom site which seriously gives a good hands on this plugin.