Headroom 插件

Headroom 插件可以在頁(yè)面滾動(dòng)時(shí)做出響應(yīng)，例如在頁(yè)面向下滾動(dòng)時(shí)，應(yīng)用欄消失；頁(yè)面向上滾動(dòng)時(shí)，應(yīng)用欄出現(xiàn)。

前面介紹的在滾動(dòng)時(shí)自動(dòng)隱藏應(yīng)用欄和自動(dòng)隱藏底部導(dǎo)航欄的功能就是使用該插件實(shí)現(xiàn)的。

調(diào)用方式

• 通過(guò)自定義屬性調(diào)用
  
• 通過(guò) JavaScript 調(diào)用
  

調(diào)用方式

通過(guò)自定義屬性調(diào)用

使用該方式無(wú)需編寫 JavaScript 代碼。只需在元素上添加 mdui-headroom="options" 屬性即可激活該插件。

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

在線運(yùn)行

通過(guò) JavaScript 調(diào)用

實(shí)例化插件：

// selector 為 CSS 選擇器或 DOM 元素
// options 為插件的參數(shù)，見(jiàn)下面的參數(shù)列表
var inst = new mdui.Headroom(selector, options);

在線運(yùn)行

參數(shù)

方法

事件