Many people have websites with a fixed position header bar at the top of the page, this will stay at the top of the page all the time the user is on the site. This is a nice way to make sure that the header is easily accessible all the time the user is on the page.
The problem with this idea is that the header bar is going to be on the page the entire time which can be a problem as it can get in the way of the content.
Headroom.js works of the idea of hiding the header bar until the user actually needs it. As you scroll down the page the header will be hidden, but when the user tries to scroll back up the page it will display the header bar.
How It Works
Headroom works by adding and removing a CSS class on to the HTML element which in turn will allow you to show or hide the header bar.
To start off you will need to add a CSS class to the element you want to use on headroom.js.
When the user scrolls down the page then headroom.js will add an additional CSS class of headroom--unpinned.
<!-- scrolling down --> <header class="headroom headroom--unpinned">
When the user scrolls up the headroom--unpinned class is removed and a new class of headroom--pinned is added.
<!-- scrolling up --> <header class="headroom headroom--pinned">
Have a look at the headroom.js demo page to see if in action.
Gain access to all tutorials
- Premium tutorials covering WordPress, Laravel and VueJS
- Download premium content
- Download premium WordPress plugins
- Only $5 a month
Join the weekly newsletter
Sign up for our newsletter. You'll be updated on new tutorials as they come available.