Ustvarite samodejno skrivanje lepljive glave s funkcijo Headroom.js

Samodejno skrivanje glav že dlje časa nenehno priljubljena v spletnem oblikovanju. Veliko blogov in spletnih revij uporablja lepljivo glavo uporabnike in neposreden dostop do navigacije.

Srednje ima na novo definirali to funkcijo z osnovnim konceptom skrije navigacijo medtem pomikanjem navzdol ampak prikaže medtem pomikanje navzgor. Ta koncept je postal zelo priljubljen trend in zdaj lahko zlahka ponovite uporabo Headroom.js.

Headroom.js je a brezplačno knjižnico vanilije JavaScript brez odvisnosti ali pretiranih funkcij API-ja. Samo dodate jo v svoj HTML, ciljate na glavo strani in pustite, da se zažene.

Prostor preprosto doda in odstrani določene razrede CSS, ki jih animirate Da bi pokaži / skrij glavo z uporabo JavaScripta za zaznavanje gibanja.

To funkcijo lahko naredite sami, a zakaj se trudite? Preskušana je višina in podpira vse večje brskalnike. Tudi lepo se igra z jQuery ali Zepto če imate že nameščeno knjižnico JS na vašem spletnem mestu.

Boste našli veliko vzorcev kode v repu GitHub, toda tukaj je a preprost primer ki cilja na #header element:

 var myElement = document.querySelector ("# header"); // ustvarimo objekt Headroom, ki prehaja v element #header var headroom = new Headroom (myElement); // inicializira knjižnico headroom.init (); 

The v() funkcijo veliko možnosti za prilagoditev. Lahko prilagodite različne razredi elementov, skupaj z različnimi sprožilca klica kjer lahko vdelajte svoje funkcije. Na primer, če želite, da se element zbledi, potem ko ga odstranite, uporabite onUnpin poklicati nazaj.

Vse te možnosti so na glavni strani vtičnika, zato preverite in si oglejte, kaj mislite. Če želite videti Prostor v akciji si oglejte spodnji pero, ki vsebuje a polni klon glavne demo strani.