Headroom
Das Headroom-Plugin kann auf das Scrollen der Seite reagieren, zum Beispiel verschwindet die Top App Bar beim Herunterscrollen der Seite und erscheint wieder beim Heraufscrollen.
Die zuvor vorgestellten Funktionen zum automatischen Ausblenden der Top App Bar und automatischen Ausblenden der Navigation Bar beim Scrollen werden mit diesem Plugin implementiert.
Verwendung
- Aufruf über benutzerdefinierte Attribute (wenn die Komponente dynamisch generiert wird, muss
mdui.mutation()zur Initialisierung aufgerufen werden) - Aufruf über JavaScript
Verwendung
Aufruf über Attribute
Bei dieser Methode ist kein JavaScript-Code erforderlich. Fügen Sie dem Element einfach das Attribut mdui-headroom="options" hinzu, um das Plugin zu aktivieren.
Wenn die Komponente dynamisch generiert wird, muss mdui.mutation() zur Initialisierung aufgerufen werden.
<div mdui-headroom style="position: fixed; top: 0; left: 0; right: 0;"></div>Aufruf über JavaScript
Plugin instanziieren:
// selector ist ein CSS-Selektor oder ein DOM-Element
// options sind die Parameter des Plugins, siehe die Parameterliste unten
var inst = new mdui.Headroom(selector, options);Parameter
| Parametername | Typ | Standardwert | Beschreibung |
|---|---|---|---|
tolerance | int | Object | 5 | Die Scroll-Distanz, nach der das Element ausgeblendet wird. Wenn der Parameterwert eine Zahl ist, bedeutet dies, dass die Triggerdistanz für das Scrollen nach oben und unten gleich ist. Es kann auch ein Objekt sein, das die Triggerdistanzen für das Scrollen nach oben und unten separat angibt. Zum Beispiel |
offset | int | 0 | Die Distanz zum oberen Rand der Seite, ab der das Element beim Scrollen ausgeblendet wird. |
initialClass | string | mdui-headroom | Die CSS-Klasse, die nach der Initialisierung des Plugins dem Element hinzugefügt wird. |
pinnedClass | string | mdui-headroom-pinned-top | Die CSS-Klasse, die hinzugefügt wird, nachdem das Element fixiert wurde. |
unpinnedClass | string | mdui-headroom-unpinned-top | Die CSS-Klasse, die hinzugefügt wird, nachdem die Fixierung des Elements aufgehoben wurde. |
Methode
| Methodenname | Beschreibung |
|---|---|
pin() | Fixiert das Element. |
unpin() | Blendet das Element aus. |
enable() | Aktiviert das Headroom-Plugin. |
disable() | Deaktiviert das Headroom-Plugin. |
getState() | Ruft den aktuellen Status des Elements ab. Es gibt insgesamt vier Zustände (pinning, pinned, unpinning, unpinned). |
Ereignis
| Ereignisname | Beschreibung | Parameter |
|---|---|---|
pin.mdui.headroom | Wird ausgelöst, wenn die Fixierung beginnt. | event._detail.inst: Instanz |
pinned.mdui.headroom | Wird ausgelöst, wenn die Fixierung abgeschlossen ist. | |
unpin.mdui.headroom | Wird ausgelöst, wenn das Ausblenden beginnt. | |
unpinned.mdui.headroom | Wird ausgelöst, nachdem das Element ausgeblendet wurde. |