开始使用

获取 MDUI 兼容性规范 JavaScript 工具库

样式

颜色与主题字体网格布局排版图标媒体辅助类阴影

JavaScript 插件

Collapse Headroom

资源

Material 图标

Headroom 插件

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

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

调用方式

通过自定义属性调用
通过 JavaScript 调用

调用方式

通过自定义属性调用

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

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

demo

通过 JavaScript 调用

实例化插件：

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

demo

参数

参数名	类型	默认值	描述
`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`	隐藏后触发。