Headroom plugin-MDUI development document, Material Design front-end framework

Call method

Called by custom attributes

There is no need to write JavaScript code to use this method. Just add on the elementmdui-headroom="options" Properties to activate the plug-in.

If the component is dynamically generated, you need to call mdui.mutation() Initialize.

<div mdui-headroom style="position: fixed; top: 0; left: 0; right: 0;"></div>

Call via JavaScript

Instantiate the plug-in:

// selector is a CSS selector or DOM element
// options are the parameters of the plug-in, see the parameter list below
var inst = new mdui.Headroom(selector, options);

parameter

parameter name	Types of	Defaults	description
`tolerance`	`intObject`	`5`	The hidden element is triggered after the scroll distance.
`offset`	`int`	`0`	Start hiding elements when scrolling after a certain distance from the top of the page.
`initialClass`	`string`	`mdui-headroom`	The CSS class added on the element after the plugin is initialized.
`pinnedClass`	`string`	`mdui-headroom-pinned-top`	The CSS class added after the element is fixed.
`unpinnedClass`	`string`	`mdui-headroom-unpinned-top`	The CSS class added after unpinning.

method

Method name	description
`pin()`	Make the element anchored.
`unpin()`	Make the element hidden.
`enable()`	Enable the headroom plugin.
`disable()`	Disable the headroom plugin.
`getState()`	Get the status of the current element. Contains four states（`pinning`、`pinned`、`unpinning`、`unpinned`）。

event

event	description	parameter
`pin.mdui.headroom`	Triggered when fixing starts.	`event._detail.inst`：实例
`pinned.mdui.headroom`	Triggered after fixation ends.
`unpin.mdui.headroom`	Triggered when it starts to hide.
`unpinned.mdui.headroom`	Triggered after hiding.