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()`	現在の要素の状態を取得します。4 つの状態（`pinning`、`pinned`、`unpinning`、`unpinned`）があります。