Headroom
Zásuvný modul Headroom lze aktivovat při posunování stránky, například když se stránka posune dolů, horní aplikační lišta zmizí; když se stránka posune nahoru, horní aplikační lišta se objeví.
Funkce automatického skrytí horní aplikační lišty a automatického skrytí spodní navigační lišty zmíněné dříve jsou implementovány pomocí tohoto zásuvného modulu.
Způsob volání
- Volání prostřednictvím vlastních atributů (pokud je komponenta dynamicky generována, je třeba zavolat
mdui.mutation()k inicializaci) - Volání přes JavaScript
Způsob volání
Volání přes atributy
Tímto způsobem není třeba psát kód v JavaScriptu. Stačí přidat atribut mdui-headroom="options" do prvku a zásuvný modul se aktivuje.
Pokud je komponenta dynamicky generována, je třeba zavolat mdui.mutation() k inicializaci.
<div mdui-headroom style="position: fixed; top: 0; left: 0; right: 0;"></div>Volání přes JavaScript
Instanciování zásuvného modulu:
// selector je CSS selektor nebo DOM prvek
// options jsou parametry zásuvného modulu, viz seznam parametrů níže
var inst = new mdui.Headroom(selector, options);Parametr
| Název parametru | Typ | Výchozí hodnota | Popis |
|---|---|---|---|
tolerance | int | Object | 5 | Kolik pixelů se má stránka posunout, aby se prvek skryl. Pokud je hodnota parametru číslo, znamená to, že vzdálenost posunování nahoru a dolů je stejná. Může to být také objekt, který určuje vzdálenost posunování nahoru a dolů zvlášť. Například |
offset | int | 0 | Kolik pixelů od horní části stránky se má prvek začít skrývat při posunování. |
initialClass | string | mdui-headroom | CSS třída přidaná do prvku po inicializaci zásuvného modulu. |
pinnedClass | string | mdui-headroom-pinned-top | CSS třída přidaná po upevnění prvku. |
unpinnedClass | string | mdui-headroom-unpinned-top | CSS třída přidaná po zrušení upevnění. |