Headroom
The Headroom plugin responds to page scrolling. For example, the app bar disappears when scrolling down and reappears when scrolling up.
The features for auto-hiding the app bar and auto-hiding the bottom navigation bar introduced earlier are implemented using this plugin.
Usage
- Calling via custom attributes (requires
mdui.mutation()for initialization if the component is dynamically generated) - Call via JavaScript
Usage
Call via Attributes
No JavaScript code is required using this method. Just add the mdui-headroom="options" attribute to the element to activate the plugin.
If the component is dynamically generated, mdui.mutation() needs to be called for initialization.
<div mdui-headroom style="position: fixed; top: 0; left: 0; right: 0;"></div>Call via JavaScript
Instantiate the plugin:
// selector is a CSS selector or a DOM element
// options are the parameters for the plugin, see the parameter list below
var inst = new mdui.Headroom(selector, options);Param
| Param Name | Type | Default | Description |
|---|---|---|---|
tolerance | int | Object | 5 | Distance scrolled before triggering element hiding. If the parameter value is a number, it means the trigger distance for scrolling up and down is the same. It can also be an object specifying trigger distances for scrolling up and down separately. For example, |
offset | int | 0 | Distance from the top of the page before starting to hide the element while scrolling. |
initialClass | string | mdui-headroom | CSS class added to the element after plugin initialization. |
pinnedClass | string | mdui-headroom-pinned-top | CSS class added when the element is pinned. |
unpinnedClass | string | mdui-headroom-unpinned-top | CSS class added when pinning is cancelled. |