Extends Headroom.js plugin by adding methods to freeze/unfreeze the current headroom's state:

freeze method: When called, this method will freeze the current headroom's state (pinned or unpinned). Headroom will not react to the user's scroll. If you wish to re-enable the headroom's default behaviour, you can call unfreeze method.

unfreeze method: When called, this method will resume headroom's default behaviour. Headroom will pin or unpin when the user scrolls the page. By default, Headroom is not freezed and calling this method before freeze will do nothing.

Downloads

Usage

With plain JS

Include the headroom.js and headroom-freeze-unfreeze-methods.js scripts in your page, and then:

// grab an element
            var myElement = document.querySelector("header");
            // construct an instance of Headroom, passing the element
            var headroom  = new Headroom(myElement);
            // initialise
            headroom.init();

            document.querySelector("...").addEventListener('click', () => {
            // freeze method
            headroom.freeze();
            });

            document.querySelector("...").addEventListener('click', () => {
            // unfreeze method
            headroom.unfreeze();
            });
            

With jQuery/Zepto

Include the headroom.js, headroom-freeze-unfreeze-methods.js and jQuery.headroom.js scripts in your page, and then:

// simple as this!
            // NOTE: init() is implicitly called with the plugin
            $("#header").headroom();

            // freeze method
            $("#header").headroom('freeze');

            // unfreeze method
            $("#header").headroom('unfreeze');
            

Styling (CSS)

Add some CSS to the new class headroom--frozen:

.headroom--frozen {
                opacity: 0.8;
            }

Browser support

Same as Headroom.js. This extension has no impact on the browsers supported by the main plugin.

License

Licensed under the MIT License.