Sticky Header scroll

With the latest theme version, sticky header scroll and offset can be defined in inline JS.

The code for sticky header is defined in header.misc.js file in /themes/your-theme-name/framework/js folder, but you can change the following values by adding them to Custom JS field in Appearance >Customize >General Settings panel.

First value is:

window.btStickyOffset = 300;

The number defines after how many pixels the sticky header appears (when scrolling down).

Second value is:

window.btStickyOpenTimeout = 50;

This value defines number of milliseconds it takes for sticky to show up (previous value 'stickyOffset' needs to be defined).

Note that we recommend this value to be over 50 to avoid cutting off sticky header.

Third value is:

window.btStickyCloseTimeout = 200;

This value defines number of milliseconds it takes for sticky to close and switch to standard header (when scrolling up).

Note that this value needs to be same or higher than the transition length defined with CSS.

Lastly, to define transition length, you can add the following CSS to Additional CSS field in Customize panel.

.btMenuHorizontal.btStickyHeaderActive.btStickyHeaderOpen .mainHeader {
    transition: transform 200ms ease;
}

This number defines the speed of transition when activating / deactivating sticky header.