Skip to Main Content

Give Your Pages Some Headroom

Posted on 12.18.2013

The use of fixed headers, which stay static as a user scrolls down a page, is currently a popular approach to keeping navigation in front of website visitors.

Depending on the size and required prominence of navigation, however, they can end up occupying a significant portion of the content area. There's a better way!

Headroom.js is a lightweight, high-performance JS widget without dependencies that enables a website to react to the user scroll, bringing elements into view when appropriate (like when that user navigates to the top of the page for example). What it is that you're doing essentially is putting your content in focus. 

The plugin works by adding and removing CS classes from an element in response to a scroll event. Headroom.js has a pure JS API, and optional jQuery/Zepto-compatible and AngularJS plugins.

Today's Top Picks for Our Readers:
Recommended by Recommended by NetLine

Leave Your Comment

Login to Comment

Become a Member

Not already a part of our community?
Sign up to participate in the discussion. It's free and quick.

Sign Up


Leave a comment
    Load more comments
    New code