Give Your Pages Some Headroom

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.