Headroom.js Gives Your Pages Some Room to Breathe

DZone 's Guide to

Headroom.js Gives Your Pages Some Room to Breathe

· Java Zone ·
Free Resource


Headroom is a Javascript plugin that allows you to hide the header until the user really needs it.

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.

<header class="headroom">
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.



Published at DZone with permission of Paul Underwood , DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}