Member-only story
Build a Sticky Navigation with Headroom.js
Screen real estate is valuable; we should optimize every pixel

Every pixel matters, period. The more we optimize our pixel real estate, the happier our end user. Happier users spend more time on our applications and might even open their wallets as a token of gratitude.
A simple, yet effective way to optimize your application is to hide the header if the user is scrolling down. This gives the user more freedom to explore content since we have more space to show the content. If the user is scrolling up, we want to show the header. How do we achieve such a header? For this task, I chose the Headroom.js library for its simplicity.

Headroom.js
Headroom.js is a lightweight, high-performance JS widget (with no dependencies!) that allows you to react to the user’s scroll. The header on this site is a living example, it slides out of view when scrolling down and slides back in when scrolling up.
Why use it?
Fixed headers are a popular approach for keeping the primary navigation in close proximity to the user. This can reduce the…