Facilitate Multiple Scroll Events With Headroom

Headroom.js is a lightweight dependency-free javascript widget known for hiding your header on scroll and revealing it again when scrolling up.

This is particularly useful when browsing a site on a device with limited real estate such as a phone. It works by adding and removing classes to the header in response to scroll events; leveraging CSS to show/hide, and animate the header in and out of view.

While we could write a simple script to do this ourselves, Headroom.js is developed with high-performance in mind, with benefits such as:

  • Dependency-free vanilla Javascript
  • Custom classes which can be modified via Headroom.options
  • Callbacks on specific scroll events
  • Tolerance settings for both up and down scrolling
  • Utilizing requestAnimationFrame which can optimize simultaneous animations together into a single reflow and repaint cycle, leading to higher fidelity animation
  • Utilizing classList which allows for a more efficient and performant manipulation of classes

Assuming one has read the short documentation and played around with the demo, I won’t get into how it works. Instead, let’s look at how we can harness all the benefits with this already useful plug-in.

Its primary purpose; showing and hiding the header. Here’s a basic example:

See the Pen Headroom.js for headers by Christian Miller (@xtianmiller) on CodePen.

Minified Example

There are a number of different ways we can utilize Headroom.js on the header. Besides completely hiding it, you could restyle and minify the size of the header to keep branding and navigation in place. Since it’s based purely on class toggling, there is a lot of flexibility. In the following example, we target the “not-top” class instead since we always want the header to be pinned.

See the Pen Headroom.js — Minified header example by Christian Miller (@xtianmiller) on CodePen.

Back to top

Probably the next most useful component you could create is a back to top button. While the fixed header gives you the ability to dive into other areas of the site regardless of scroll position, having a back to top button allows a user to go back to the top of the page.

To implement, it’s the same principal but in reverse. You’ll want to reveal the button instead of hiding it when you scroll to the designated offset — so the initial state will be hidden.

See the Pen Headroom.js — Back to top example by Christian Miller (@xtianmiller) on CodePen.

In some cases there may be sub navigation or an important component such as a filter menu or search field that lives further down the page; important enough that it could become sticky once it goes beyond the top of the view port. An example of this would be a product listing on an e-commerce site that has filtering, category or search components.

See the Pen Headroom.js — Utility nav example by Christian Miller (@xtianmiller) on CodePen.

Revealing elements

And finally, you could potentially use it as a means to animate elements as they appear in the view port on scroll. By using a reliable object looper method, we can instantiate a new instance of Headroom to any element with the class “reveal”, and provide Headroom with a dynamic offset value from some simple math.

See the Pen Headroom.js — Reveal element example by Christian Miller (@xtianmiller) on CodePen.

By Christian Miller  |  Follow me on Twitter