Crea un'intestazione appiccicosa auto-nascondere con Headroom.js

Nascondere automaticamente le intestazioni sono stati costantemente popolari nel web design per un po 'di tempo. Molti blog e riviste online utilizzano l'intestazione adesiva su mantenere gli utenti impegnati e dare loro l'accesso diretto alla navigazione.

Il medio ha ridefinito questa funzionalità con un concetto di base che nasconde la navigazione mentre scorrendo verso il basso ma lo mostra mentre scorrendo verso l'alto. Questo concetto è diventato a tendenza selvaggiamente popolare e ora puoi facilmente replicarlo utilizzando Headroom.js.

Headroom.js è un libreria JavaScript gratuita di vaniglia senza dipendenze o funzioni API eccessive. Basta aggiungerlo al codice HTML, indirizzare l'intestazione della pagina e lasciarla funzionare.

Headroom semplicemente aggiunge e rimuove alcune classi CSS che animano in modo da mostra / nascondi l'intestazione usando JavaScript per rilevare il movimento.

Potresti fare da solo questa funzionalità ma perché preoccuparti? Headroom è testato e supporta tutti i principali browser. È pari gioca bene con jQuery o Zepto se hai già una libreria JS installata sul tuo sito.

Lo troverai un sacco di esempi di codice nel repository GitHub ma ecco a semplice esempio che bersaglia il #intestazione elemento:

 var myElement = document.querySelector ("# header"); // crea un oggetto Headroom che passa nell'elemento #header var headroom = new Headroom (myElement); // inizializza la libreria headroom.init (); 

Il dentro() la funzione ha un sacco di opzioni per personalizzare. È possibile personalizzare il diverso classi di elementi, insieme a diversi richiami all'attivazione di eventi dove puoi incorporare le proprie funzioni. Ad esempio, se vuoi che l'elemento svanisca dopo che è stato stappato, useresti il onUnpin richiama.

Queste opzioni sono tutte elencato nella pagina principale del plugin, quindi dai un'occhiata e vedi cosa ne pensi. Se vuoi vedere Headroom in azione dai un'occhiata alla penna qui sotto che contiene a clone completo della pagina demo principale.