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
$("#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