Download
Headroom.js is a lightweight, high-performance JS widget (with no dependencies!) that allows you to react to the user's scroll. The header on this site is a living example, it slides out of view when scrolling down and slides back in when scrolling up. Fixed headers are a popular approach for keeping the primary navigation in close proximity to the user. This can reduce the effort required for a user to quickly navigate a site, but they are not without problems. Large screens are usually landscape-oriented, meaning less vertical than horizontal space. A fixed header can therefore occupy a significant portion of the content area. Small screens are typically used in a portrait orientation. Whilst this results in more vertical space, because of the overall height of the screen, a meaningfully-sized header can still be quite imposing.
Features
- Headroom.js allows you to bring elements into view when appropriate, and give focus to your content the rest of the time
- In response to scroll events, headroom.js adds and removes CSS classes to an element
- Relying on CSS classes affords headroom.js great flexibility
- Anything you can do with CSS you can do in response to the user's scroll
- Headroom.js has a pure JS API, plus an optional jQuery plugin and AngularJS directive
- Headroom.js can also accept an options object to alter the way it behaves
Project Samples
