SlidingHeader
- HTML tag name:
<builderius-sliding-header> - Implements 3rd-party script: headroom.js
- Allowed children modules: any
- Available since:
0.9.7 PRO
Description
This module allows creating a functional "sliding" header. It is based on headroom.js script.
How it works
The module creates <builderius-sliding-header> custom HTML tag. It is a modular self contained instance of headroom.js
Since <builderius-sliding-header> is a custom HTML element, its default behavior is equal to inline element, not block; it can be changed any time with display CSS property.
We may utilize data-settings attribute and pass any custom JSON config that is compatible with the official headroom.js API: https://wicky.nillia.ms/headroom.js/
By default, the module has these styles:
position: static;
width: 100%;
We suggest putting the module as a root item in the modules tree, so the module remains at the top of the page. Next, insert any modules into this module and apply any styles needed. It is very flexible as it has no limits and feels like a regular HTML layout building. So, any header layout is possible!
API
Attributes
data-settings
This attribute accepts a stringified JSON object. This is the way of providing headroom.js API compatible config.
Events
ready (scope: element)
builderius-sliding-header-ready (scope: window)
This event is getting fired every time the component is being initiated/re-initiated. It also passes some data:
{ el }
Where el is the reference to the HTML element
Methods
reInit
This method resets and initiates the component.