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%); }