Headroom
Le plugin Headroom peut réagir au défilement de la page, par exemple en faisant disparaître la Top App Bar lorsque la page défile vers le bas, et en l'affichant lorsque la page défile vers le haut.
Les fonctions d'auto-masquage de la Top App Bar et d'auto-masquage de la Navigation inférieure présentées précédemment sont implémentées à l'aide de ce plugin.
Utilisation
- Appel via des attributs personnalisés (si le composant est généré dynamiquement, vous devez appeler
mdui.mutation()pour l'initialiser) - Appel via JavaScript
Utilisation
Appel via attributs
Cette méthode ne nécessite pas d'écrire de JavaScript. Il suffit d'ajouter l'attribut mdui-headroom="options" à l'élément pour activer le plugin.
Si le composant est généré dynamiquement, il faut appeler mdui.mutation() pour l'initialiser.
<div mdui-headroom style="position: fixed; top: 0; left: 0; right: 0;"></div>Appel via JavaScript
Instancier le plugin :
// selector est un sélecteur CSS ou un élément DOM
// options sont les paramètres du plugin, voir la liste des paramètres ci-dessous
var inst = new mdui.Headroom(selector, options);Paramètre
| Nom | Type | Défaut | Description |
|---|---|---|---|
tolerance | int | Object | 5 | À quelle distance de défilement déclencher la disparition de l'élément. Si la valeur est un nombre, la distance de déclenchement est identique pour le défilement vers le haut et vers le bas. Peut aussi être un objet, spécifiant respectivement les distances de déclenchement pour le défilement vers le haut et vers le bas. Exemple |
offset | int | 0 | À quelle distance depuis le haut de la page le défilement doit-il commencer à masquer l'élément. |
initialClass | string | mdui-headroom | Classe CSS ajoutée à l'élément après l'initialisation du plugin. |
pinnedClass | string | mdui-headroom-pinned-top | Classe CSS ajoutée après fixation de l'élément. |
unpinnedClass | string | mdui-headroom-unpinned-top | Classe CSS ajoutée après suppression de la fixation. |