Vytvorte automatickú skrytú hlavičku s Headroom.js

Automatické skrytie záhlavia sú už dlho populárne v webovom dizajne. Mnohé blogy a online časopisy používajú lepiacu hlavičku udržať používateľov zapojení a poskytnúť im priamy prístup k navigácii.

Médium má túto funkciu predefinovala so základným pojmom, ktorý skryje navigáciu zatiaľ čo posúvanie nadol ale ukazuje to zatiaľ čo posúvanie nahor. Tento koncept sa stal populárny trend a teraz môžete ľahko replikujte to použitím Headroom.js.

Headroom.js je a bezplatnú knižnicu JavaScript bez závislostí alebo nadmerných funkcií rozhrania API. Stačí ho pridať do kódu HTML, zacieľte na hlavičku stránky a nechajte ju spustiť.

Jednoducho na hlave pridáva a odstraňuje určité triedy CSS, ktoré animujú aby zobraziť / skryť hlavičku pomocou funkcie JavaScript na zistenie pohybu.

Mohli by ste túto funkciu vytvoriť sami, ale prečo sa obťažovať? Izbová výška je testovaná a podporuje všetky hlavné prehliadače. Dokonca hraje pekne s jQuery alebo Zeptom ak už máte na svojej stránke knižnicu JS.

Nájdete to veľa kódových vzoriek v GitHub repo, ale tu je a jednoduchý príklad ktorá je zameraná na #header element:

 var myElement = document.querySelector ("# header"); // vytvorte objekt Headroom prechádzajúci prvkom #header var headroom = new Headroom (myElement); // inicializujte knižnicu headroom.init (); 

init () má funkciu množstvo možností na prispôsobenie. Môžete prispôsobiť rôzne triedy prvkov, spolu s rôznymi spúšťanie spúšťacích udalostí kde môžeš vložte svoje vlastné funkcie. Napríklad, ak chcete, aby prvok zmizol po jeho odopnutí, použil by ste onUnpin zavolaj späť.

Tieto možnosti sú všetky uvedené na hlavnej stránke doplnku, tak sa pozrite na to, čo si myslíte. Ak chcete vidieť Hliadka v akcii pozrite sa na pero, ktoré obsahuje a úplný klon hlavnej demo stránky.