Creați o antet care se ascunde automat cu Headroom.js

Ascunderea anteturilor au fost constant popular în designul web pentru o perioadă destul de lungă. Multe bloguri și reviste online folosesc antetul lipicios mențineți utilizatorii implicați și le oferă acces direct la navigație.

Mediu are a redefinit această caracteristică cu un concept de bază care ascunde navigarea in timp ce derulând în jos dar o arată in timp ce scrolling up. Acest concept a devenit a tendință sălbatică populare și acum puteți ușor replicați-o utilizând Headroom.js.

Headroom.js este a free vanilla biblioteca JavaScript fără dependențe sau caracteristici API excesive. Tocmai îl adăugați la codul HTML, vizați antetul paginii și lăsați-l să ruleze.

Spațiu pur și simplu adaugă și elimină anumite clase CSS care animă pentru a arătați / ascundeți antetul folosind JavaScript pentru a detecta mișcarea.

Ați putea face această funcție singură, dar de ce deranjez? Înălțimea este testată și acceptă toate browserele importante. E chiar joacă frumos cu jQuery sau Zepto dacă aveți deja o bibliotecă JS instalată pe site-ul dvs..

Vei găsi o multime de mostre de cod în repo GitHub, dar aici e a un exemplu simplu care vizează #antet element:

 var myElement = document.querySelector ("# header"); // a crea un obiect Headroom care trece prin elementul #header var headroom = noul Headroom (myElement); // inițializați biblioteca headroom.init (); 

init () funcția a o mulțime de opțiuni pentru a personaliza. Puteți personaliza diferitele clase de elemente, împreună cu altele declanșarea apelurilor de declanșare a evenimentelor unde poti încorporați propriile funcții. De exemplu, dacă doriți ca elementul să se estompeze după ce acesta este fixat, veți folosi onUnpin suna inapoi.

Aceste opțiuni sunt toate listate pe pagina principală a pluginului, deci verificați-l și vedeți ce credeți. Daca vrei sa vezi Spațiu în acțiune aruncați o privire la stiloul de dedesubt care conține a clona completă a paginii principale de demo.