Headroom
Wtyczka Headroom reaguje na przewijanie strony, na przykład pasek aplikacji znika podczas przewijania w dół i pojawia się podczas przewijania w górę.
Funkcje automatycznego ukrywania paska aplikacji i automatycznego ukrywania dolnego paska nawigacji podczas przewijania, o których wspomniano wcześniej, są realizowane za pomocą tej wtyczki.
Sposób użycia
- Wywołanie przez atrybuty niestandardowe (jeśli komponent jest generowany dynamicznie, należy wywołać
mdui.mutation()w celu inicjalizacji) - Wywołanie przez JavaScript
Sposób użycia
Wywołanie przez atrybuty
W ten sposób nie trzeba pisać kodu JavaScript. Wystarczy dodać atrybut mdui-headroom="options" do elementu, aby aktywować wtyczkę.
Jeśli komponent jest generowany dynamicznie, należy wywołać mdui.mutation() w celu inicjalizacji.
<div mdui-headroom style="position: fixed; top: 0; left: 0; right: 0;"></div>Wywołanie przez JavaScript
Instancjonowanie wtyczki:
// selector to selektor CSS lub element DOM
// options to parametry wtyczki, patrz lista parametrów poniżej
var inst = new mdui.Headroom(selector, options);Parametr
| Nazwa parametru | Typ | Wartość domyślna | Opis |
|---|---|---|---|
tolerance | int | Object | 5 | Odległość przewijania, po której następuje ukrycie elementu. Jeśli wartość parametru jest liczbą, oznacza to, że odległość wyzwalająca przewijanie w górę i w dół jest taka sama. Może to być również obiekt określający odpowiednio odległości wyzwalające przewijanie w górę i w dół. Na przykład |
offset | int | 0 | Odległość od góry strony, po której przewijanie zaczyna ukrywać element. |
initialClass | string | mdui-headroom | Klasa CSS dodawana do elementu po inicjalizacji wtyczki. |
pinnedClass | string | mdui-headroom-pinned-top | Klasa CSS dodawana po przypięciu elementu. |
unpinnedClass | string | mdui-headroom-unpinned-top | Klasa CSS dodawana po odpięciu elementu. |