Headroom
Il plugin Headroom permette di rispondere allo scorrimento della pagina: ad esempio, quando si scorre verso il basso, la Top App Bar scompare; quando si scorre verso l'alto, la Top App Bar riappare.
Le funzioni di nascondimento automatico della Top App Bar e nascondimento automatico della barra di navigazione inferiore descritte in precedenza sono implementate utilizzando questo plugin.
Modalità d'uso
- Chiamata tramite attributi personalizzati (se il componente è generato dinamicamente, è necessario chiamare
mdui.mutation()per l'inizializzazione) - Chiamata via JavaScript
Modalità d'uso
Chiamata via attributi
Utilizzando questo metodo non è necessario scrivere codice JavaScript. Basta aggiungere all'elemento l'attributo mdui-headroom="options" per attivare il plugin.
Se il componente è generato dinamicamente, è necessario chiamare mdui.mutation() per l'inizializzazione.
<div mdui-headroom style="position: fixed; top: 0; left: 0; right: 0;"></div>Chiamata via JavaScript
Istanziazione del plugin:
// selector è un selettore CSS o un elemento DOM
// options sono i parametri del plugin, vedi l'elenco dei parametri qui sotto
var inst = new mdui.Headroom(selector, options);Parametro
| Nome | Tipo | Predefinito | Descrizione |
|---|---|---|---|
tolerance | int | Object | 5 | La distanza di scorrimento dopo la quale attivare il nascondimento dell'elemento. Se il valore del parametro è un numero, indica che la distanza di attivazione per lo scorrimento verso l'alto e verso il basso è la stessa. Può anche essere un oggetto che specifica separatamente le distanze di attivazione per lo scorrimento verso l'alto e verso il basso. Ad esempio, |
offset | int | 0 | Dopo quanta distanza dalla parte superiore della pagina iniziare a nascondere l'elemento durante lo scorrimento. |
initialClass | string | mdui-headroom | Classe CSS aggiunta all'elemento dopo l'inizializzazione del plugin. |
pinnedClass | string | mdui-headroom-pinned-top | Classe CSS aggiunta dopo che l'elemento è stato fissato (pinned). |
unpinnedClass | string | mdui-headroom-unpinned-top | Classe CSS aggiunta dopo che l'elemento è stato rimosso dalla posizione fissata (unpinned). |