Headroom.js Usage and Examples

How to use Headroom.js with jQuery. Full Documentation.

How to Use Headroom.js with jQuery

With jQuery include the headroom.js and jQuery.headroom.js scripts in your page, and then:

// simple as this!
// NOTE: init() is implicitly called with the plugin

You must include the following to the CSS

 * Note: I have omitted any vendor-prefixes for clarity.
 * Adding them is left as an exercise for the reader.
.headroom {
    will-change: transform;
    transition: transform 200ms linear;
.headroom--pinned {
    transform: translateY(0%);
.headroom--unpinned {
    transform: translateY(-100%);


Full Headroom.js Documentation