Headroom.js Usage and Examples

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

Tweet
Share
Share
Pin

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
$("#header").headroom();

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