This project is not covered by Drupal’s security advisory policy.

What's it all about?

Headroom.js is a lightweight, high-performance JS widget that allows you to react to the user's scroll.

Why use it?

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.

Headroom.js allows you to bring elements into view when appropriate, and give focus to your content the rest of the time.

How to use

Drupal 7

  1. Download the Headroom.js source files to sites/all/libraries/headroomjs. Note that there are four files.
  2. Download and enable the Headroom.js module
  3. Configure the settings at admin/config/system/headroomjs
  4. Add style to your header for more flair (no CSS provided)

Drupal 8

  1. Download the Headroom.js zip from GitHub: https://github.com/WickyNilliams/headroom.js
  2. Unzip to /libraries in your docroot
  3. Enable Headroom.js module
  4. Configure any necessary settings at /admin/config/user-interface/headroomjs

Headroom.js will attach to the page (if enabled in settings) to the HTML element specified.

No CSS is provided, so you will still need to add position and display on headroom classes.

See for more detail: http://wicky.nillia.ms/headroom.js/

Supporting organizations: 
Supporting Development

Project Information

Downloads