Headroom.js

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 (not released)

See this issue for patch development: #2324691: plugin not detected (7.x) . 7.x patches welcome here.

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

Note module version 8.x-1.0-beta2 or above is required to match new file structure of the library.

1. Download the Headroom.js zip from GitHub: https://github.com/WickyNilliams/headroom.js
2. Unzip into /libraries in your docroot, rename the folder headroomjs
3. Download https://unpkg.com/headroom.js and put it at /libraries/headroomjs/headroom.js
4. Enable Headroom.js module using the modules page or Drush. (A warning message will appear if files are not located)

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/