menuMDUI文档
color_lens
near_me
开始使用
keyboard_arrow_down
layers
样式
keyboard_arrow_down
widgets
组件
keyboard_arrow_down
view_carousel
JavaScript 插件
keyboard_arrow_down
local_mall
资源
keyboard_arrow_down
基于 Material Design 3 和 Web Components 的 mdui 2 已发布,查看 mdui 2 开发文档

Headroom 插件

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

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

调用方式

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

调用方式

通过自定义属性调用

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

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

<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

参数

参数名类型默认值描述
toleranceintObject5

滚动多少距离后触发隐藏元素。

若参数值为数字,表示向上和向下滚动触发距离相同。

也可以是一个对象,分别指定向上和向下滚动的触发距离。如 { down: 10, up: 5 }

offsetint0在离页面顶部多少距离后滚动时开始隐藏元素。
initialClassstringmdui-headroom初始化插件后在元素上添加的 CSS 类。
pinnedClassstringmdui-headroom-pinned-top固定住元素后添加的 CSS 类。
unpinnedClassstringmdui-headroom-unpinned-top取消固定后添加的 CSS 类。

方法

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

事件

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