基於 Material Design 3 與 Web Components 的全新 mdui 2 現已發佈，前往查看 mdui 2 開發文件。

Headroom

Headroom 外掛程式可以在頁面捲動時做出回應，例如在頁面向下捲動時，應用程式列消失；頁面向上捲動時，應用程式列出現。

前面介紹的在捲動時自動隱藏應用程式列和自動隱藏底部導覽列的功能就是使用該外掛程式實作的。

呼叫方式

使用該方式無需編寫 JavaScript 程式碼。只需在元素上添加 mdui-headroom="options" 屬性即可啟用該外掛程式。

若元件是動態產生的，則需要呼叫 mdui.mutation() 進行初始化。

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

實例化外掛程式：

// selector 為 CSS 選取器或 DOM 元素
// options 為外掛程式的參數，見下面的參數清單
var inst = new mdui.Headroom(selector, options);

參數名稱	類型	預設值	說明
`tolerance`	`int` \| `Object`	`5`	捲動多少距離後觸發隱藏元素。若參數值為數字，表示向上和向下捲動觸發距離相同。也可以是一個物件，分別指定向上和向下捲動的觸發距離。如 `{ down: 10, up: 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`）。