This article will show you how to install headroom.js on your website. This is a unique JavaScript library that allows you to have a fixed header that is hidden when a user scrolls down the page, but shows when a user scrolls out. You get the benefit of having navigation ever present on a website, but it doesn't take up the viewport when a user is attempting to read content.

It's really the best of both worlds in terms of header usability, and this article will show you how to integrate it into your website. For this example, we are using Oxygen Builder and WordPress, but as long as you have access to the HTML and can install JavaScript, add classes, and style via CSS, you can use the methods outlined in this tutorial on your own site as well.

We really like headroom.js over at the agency, and install it on essentially every single one of our websites that have a fixed header set up. This includes all of our ecommerce builds, many corporate websites, and more. The usability benefit here is huge, and there are no drawbacks.

The headroom library has no dependencies, is created in vanilla JavaScript, is very easy to use even if you don't understand how to code, is only a couple of kilobytes, and can be installed in minutes. With that introduction out of the way, let's talk about how to install headroom.js into an Oxygen Builder website.

If you are interested in watching a video tutorial, is a 16 minute walkthrough on how to use headroom.js.

The process here is very simple. First, we install the JavaScript library, then we install the CSS, and finally we initialize it onto our header element in the website.

How Headroom.JS Works

But, before we install it, let's discuss how this library actually works.

The JavaScript identifies when a user is scrolling down, scrolling up, and the proximity that the header is to the top or bottom of the page. Then, it applies various CSS classes. For example, when a user is scrolling down the CSS class .headroom—pinned is dynamically applied. When a user scrolls all the way to the top of the page the CSS class .headroom—top class.

We then take these individual classes, write CSS for them, which is then applied as the class is added, and removed when the class is removed. Because we know that the .headroom—pinned means that the header of the website should be showing to the visitor, we can write CSS that does just that.

With that description out of the way, let's get into our tutorial on how to use headroom.js to get a fixed header that hides when scrolling working on your website.

(Oxygen Builder Only) Set Up Your Header

Disregard this section if you’re not using Oxygen Builder to create your website. If you are using Oxygen Builder, do not use the header builder with this library. In fact, we recommend that you never use the header builder, and simply create a section, add the header tag via the main settings panel, and place your content within. This gives you a lot more control over the layout.

The only reason that header builder is good is that it adds a sticky effect, but that makes no sense if we're using the headroom.js library. For more clarification, definitely watch the video above which goes into detail about this step for the Oxygen Builder and WordPress.

Install Headroom.js

In the video tutorial, we simply copied and pasted the minified version of headroom JS into an Advanced Scripts entry. This is pure JavaScript, so all we need to do is add the javascript snippet to the wp_footer.

You can also use a CDN to deliver this: https://unpkg.com/headroom.js

Initialize Headroom.js

In that same entry, we also initialize the script. But this does is it takes the JavaScript, and says that it needs to apply the various CSS classes to the specific element. In this situation, we are simply selecting whatever element has the <header> tag associated with it.

// grab an element
var myElement = document.querySelector("header");
// construct an instance of Headroom, passing the element
var headroom  = new Headroom(myElement);
// initialise
headroom.init();Code language: JavaScript (javascript)

Set Headroom Options

This is an optional step, but you can also specify various options for this library. In our situation, we typically only use the offset option. This means that the header will always remain fixed (and visible) whenever we are less than 200 pixels away from the top of the screen.

var options = {
    // vertical offset in px before element is first unpinned
    offset : 0,
}Code language: JavaScript (javascript)

Add CSS That Applies The Fixed Header Slide Effect

This is the basic CSS that we used to apply the slide effect to our fixed header. Simply add this anywhere you want within the website.

.headroom {
    will-change: transform;
    -webkit-transition: -webkit-transform 200ms linear;
    transition: -webkit-transform 200ms linear;
    -o-transition: transform 200ms linear;
    transition: transform 200ms linear;
    transition: transform 200ms linear, -webkit-transform 200ms linear;
}
.headroom--pinned {
    -webkit-transform: translateY(0%);
        -ms-transform: translateY(0%);
            transform: translateY(0%);
}
.headroom--unpinned {
    -webkit-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
            transform: translateY(-100%);
}Code language: CSS (css)

You can also write additional CSS that dynamically applies background colors when scrolling, resize is the entire header when near the top of the page, and makes use of the additional CSS classes that this library applies to the header when scrolling or on various positions of the page. You can use Advanced Scripts to add this CSS, Scripts Organizer, the universal CSS for Oxygen Builder, or whatever stylesheet your website is using.

Offest Content

For Oxygen Builder, we typically use a catchall template to create a header and footer. in between the header and footer is an inner content block. We offset this inner content block by the height of the header (you can use margin top or padding top), as positioning something as fixed will have it overlay the various content.

By coupling this with the 200 pixel offset option mentioned above, all of the content is visible and properly aligned.

Conclusion

At this point, you now have a fixed header that slides out of view when a user scrolls down the page, and reappears when a user scrolls up the page. This is great for user experience, website usability, and an overall interesting effect that's very easy to add read.

we hope that this tutorial on implementing headroom.js into your website was helpful, if you have any questions feel free to reach out in the comments section below. Also, we recommend subscribing to our YouTube channel and watching that video tutorial for additional clarity on adding a sticky header into Oxygen Builder.