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. (Try the demo here to get the idea.)

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 8-11

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 yourself. Note the "tolerance" value tells the library how much scrolling in pixels triggers the effect - you may need to adjust this to get it to "pop" intuitively. (e.g. a value of 200 pixels will not trigger the effect as quickly as 10 or 20 pixels.)

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)

See the library's homepage for more info.