Lag en automatisk skjult klistremerke med Headroom.js

Automatisk skjult hoder har vært stadig populær i webdesign for en stund. Mange blogger og elektroniske magasiner bruker den klissete heisen til holde brukerne engasjert og gi dem direkte tilgang til navigasjonen.

Medium har omdefinert denne funksjonen med et grunnleggende konsept som skjuler navigasjonen samtidig som ruller ned men viser det samtidig som ruller opp. Dette konseptet har blitt en Veldig populær trend og nå kan du enkelt gjenta det ved hjelp av Headroom.js.

Headroom.js er en gratis vanilj JavaScript-bibliotek uten avhengigheter eller overdreven API-funksjoner. Du legger bare til den i HTML-en din, målrettes på sidens overskrift og lar den løpe.

Hodetelefonen enkelt legger til og fjerner visse CSS klasser som animerer for å vis / skjul overskriften bruker JavaScript for å oppdage bevegelsen.

Du kan selv gjøre denne funksjonaliteten, men hvorfor bry deg? Hodestue er testet og støtter alle de store nettleserne. Det selv spiller fint med jQuery eller Zepto hvis du allerede har et JS-bibliotek installert på nettstedet ditt.

Du vil finne rikelig med kodeprøver i GitHub repo men her er en enkelt eksempel som retter seg mot #Overskrift element:

 var myElement = document.querySelector ("# header"); // Opprett et hovedromobjekt som passerer i #header-elementet var toppsøke = nytt topprommet (myElement); // initialiser biblioteket headroom.init (); 

De i det() funksjonen har masse alternativer å tilpasse. Du kan tilpasse de forskjellige element klasser, sammen med forskjellige hendelsesutløser tilbakeringinger hvor du kan legge inn dine egne funksjoner. For eksempel, hvis du vil at elementet skal falme etter at det er opphevet, vil du bruke onUnpin Ring tilbake.

Disse alternativene er alle oppført på hoved plugin-siden, så sjekk det ut og se hva du synes. Hvis du vil se Hodestue i aksjon ta en titt på pennen under som inneholder a full klon av hoveddemosiden.