headroom.js

Headroom.js is a small JavaScript library that watches a page's scroll position and shows or hides a fixed header based on which direction the user is scrolling. When you scroll down, the header slides out of view to give more reading space. When you scroll back up, the header reappears. The idea is that a header is most useful when you are moving back toward the top of a page, so hiding it while moving down keeps the content area clear.

The library has no external dependencies, meaning you do not need jQuery or any other library installed alongside it. You add it to a project via npm or yarn, or by linking to a hosted file directly. Setup takes just a few lines of JavaScript: you point the library at your header element, call an init method, and add a handful of CSS rules that control the slide animation. The CSS classes the library toggles are standard, so you can adjust the animation timing or style however you like.

All configuration and detailed documentation are on the project's own website rather than in the README. The README itself is brief and covers installation, a quick start example, and instructions for contributors who want to build or test the project locally. The library is released under the MIT license, which allows free use in personal and commercial projects.