Stvorite ljepljivo zaglavlje s automatskim skrivanjem s funkcijom Headroom.js

Automatsko skrivanje zaglavlja su stalno popularni u web dizajnu za dugo vremena. Mnogi blogovi i online časopisi koriste ljepljiva zaglavlja zadržati korisnike uključenim i omogućiti im izravan pristup navigaciji.

Medij ima redefinirala ovu značajku s osnovnim konceptom skriva navigaciju dok pomicanje prema dolje ali pokazuje dok pomicanje gore. Ovaj koncept je postao mahnito popularan trend i sada možete lako ponoviti koristeći Headroom.js.

Headroom.js je besplatno vanilija JavaScript knjižnica bez ovisnosti ili pretjeranih značajki API-ja. Samo ga dodajte u svoj HTML, ciljajte zaglavlje stranice i pustite ga da se pokrene.

Jednostavno dodaje i uklanja određene CSS klase koje animiraju da bi prikaži / sakrij zaglavlje pomoću JavaScripta za otkrivanje pokreta.

Možete to učiniti sami, ali zašto se gnjaviti? Ispitana je visina glave i podržava sve glavne preglednike. Čak i igra lijepo s jQuery ili Zepto ako na vašoj web-lokaciji već imate instaliranu JS knjižnicu.

Naći ćete mnogo uzoraka koda u GitHub repo, ali evo a jednostavan primjer koji cilja #Zaglavlje element:

 var myElement = document.querySelector ("# header"); // kreira objekt Headroom koji prolazi u elementu #header var headroom = new Headroom (myElement); // inicijalizira knjižnicu headroom.init (); 

u tome() funkcija ima mnogo mogućnosti za prilagodbu. Možete prilagoditi različite klase elemenata, zajedno s različitim povratni poziv okidača događaja gdje možeš ugradite vlastite funkcije. Na primjer, ako želite da element nestane nakon uklanjanja, upotrijebit ćete onUnpin uzvratiti poziv.

Ove su opcije sve naveden na glavnoj stranici dodatka, zato provjerite i vidite što mislite. Ako želite vidjeti Visina u akciji pogledajte olovku ispod koja sadrži a puni klon glavne demo stranice.