Headroom
Плагин Headroom позволяет реагировать на прокрутку страницы: например, панель приложения исчезает при прокрутке вниз и появляется при прокрутке вверх.
Описанные ранее функции автоматического скрытия панели приложения и автоматического скрытия нижней панели навигации при прокрутке реализованы с помощью этого плагина.
Использование
- Вызов через пользовательские атрибуты (если компонент создается динамически, необходимо вызвать
mdui.mutation()для инициализации) - Вызов через JavaScript
Использование
Вызов через атрибуты
При использовании этого способа не нужно писать JavaScript-код. Просто добавьте атрибут mdui-headroom="options" к элементу, чтобы активировать плагин.
Если компонент создается динамически, необходимо вызвать mdui.mutation() для инициализации.
<div mdui-headroom style="position: fixed; top: 0; left: 0; right: 0;"></div>Вызов через JavaScript
Инициализация плагина:
// selector — это CSS-селектор или DOM-элемент
// options — параметры плагина, см. список параметров ниже
var inst = new mdui.Headroom(selector, options);Параметр
| Имя параметра | Тип | По умолчанию | Описание |
|---|---|---|---|
tolerance | int | Object | 5 | Расстояние прокрутки, после которого элемент начинает скрываться. Если значением является число, оно указывает на одинаковое расстояние срабатывания для прокрутки вверх и вниз. Также может быть объектом, задающим разные расстояния срабатывания для прокрутки вверх и вниз. Например, |
offset | int | 0 | Минимальное расстояние от верха страницы, при котором элемент начинает скрываться при прокрутке. |
initialClass | string | mdui-headroom | CSS-класс, добавляемый к элементу после инициализации плагина. |
pinnedClass | string | mdui-headroom-pinned-top | CSS-класс, добавляемый после фиксации элемента. |
unpinnedClass | string | mdui-headroom-unpinned-top | CSS-класс, добавляемый после отмены фиксации. |