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 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 effort required for a user to quickly navigate a site, but they are not without problems.
Large screens are usually landscape-oriented, meaning, there’s less vertical than horizontal space. A fixed header can, therefore, occupy a significant portion of the content area. Small screens are typically used in portrait orientation. While this results in more vertical space, because of the overall height of the screen a meaningfully-sized header can still be quite imposing.
Headroom.js allows you to bring elements into view when appropriate, and give focus to your content the rest of the time.
Assuming you have set up your project already, install Headroom with
yarn install headroom.js
Or include the headroom.js library with a CDN:
index.html file. Go ahead and create the three files.
touch style.css index.html index.js
Here’s how our
index.html will look:
Notice we have our header with the classes
headroom headroom-pinned headroom-unpinned — these classes are being applied conditionally, depending on the user action. E.g. if the user is scrolling up, we apply the
headroom-pinned class, and if the user is scrolling downwards, we apply the
Next, open the
Super simple. Here’s what we’re doing;
- Import the CSS styles so we can style our header and application.
- Import the Headroom library.
- Select the
headerelement inside our DOM.
- Call the Headroom constructor with the
headerelement and passing options to the constructor.
- Initializing the
headroomobject. By calling the
initmethod, we’re attaching event listeners to notify us about the user actions. The user actions can be scrolling up, or as in this case, scrolling down.
If you open the application and start scrolling, you should see the header element changing classes depending on the user action.
Voila, now all we need to do is apply the styles depending on the classes.
There you go! That’s all we need. If the user is scrolling down, we’re animating the header away. If the user is scrolling up, we’re sliding the header in from up.
Thanks for reading. Happy coding, stay awesome!