Headroom 插件

Headroom 插件可以在页面滚动时做出响应，例如在页面向下滚动时，应用栏消失；页面向上滚动时，应用栏出现。

前面介绍的在滚动时自动隐藏应用栏和自动隐藏底部导航栏的功能就是使用该插件实现的。

调用方式

通过自定义属性调用（若组件是动态生成的，则需要调用 mdui.mutation() 进行初始化）
通过 JavaScript 调用

调用方式

通过自定义属性调用

使用该方式无需编写 JavaScript 代码。只需在元素上添加 mdui-headroom="options" 属性即可激活该插件。

若组件是动态生成的，则需要调用 mdui.mutation() 进行初始化。

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

通过 JavaScript 调用

实例化插件：

// selector 为 CSS 选择器或 DOM 元素
// options 为插件的参数，见下面的参数列表
var inst = new mdui.Headroom(selector, options);

参数

参数名	类型	默认值	描述
`tolerance`	`intObject`	`5`	滚动多少距离后触发隐藏元素。
`offset`	`int`	`0`	在离页面顶部多少距离后滚动时开始隐藏元素。
`initialClass`	`string`	`mdui-headroom`	初始化插件后在元素上添加的 CSS 类。
`pinnedClass`	`string`	`mdui-headroom-pinned-top`	固定住元素后添加的 CSS 类。
`unpinnedClass`	`string`	`mdui-headroom-unpinned-top`	取消固定后添加的 CSS 类。

方法

方法名	描述
`pin()`	使元素固定住。
`unpin()`	使元素隐藏。
`enable()`	启用 headroom 插件。
`disable()`	禁用 headroom 插件。
`getState()`	获取当前元素的状态。共包含四种状态（`pinning`、`pinned`、`unpinning`、`unpinned`）。

事件

事件	描述	参数
`pin.mdui.headroom`	开始固定时触发。	`event._detail.inst`：实例
`pinned.mdui.headroom`	固定结束后触发。
`unpin.mdui.headroom`	开始隐藏时触发。
`unpinned.mdui.headroom`	隐藏后触发。