Opret en automatisk skjult klistreliste med Headroom.js

Automatisk skjult headers har været stadigt populær i webdesign i et stykke tid. Mange blogs og online magasiner bruger den klæbende overskrift til holde brugere engageret og give dem direkte adgang til navigationen.

Medium har omdefinerede denne funktion med et grundlæggende koncept som skjuler navigationen mens ruller ned men viser det mens ruller op. Dette begreb er blevet en vildt populære trend og nu kan du nemt replikere det ved brug af Headroom.js.

Headroom.js er en gratis vanilla JavaScript-bibliotek uden afhængigheder eller overdreven API-funktioner. Du tilføjer blot det til din HTML, målrettes til sideoverskriften og lad det køre.

Hovedrum simpelthen tilføjer og fjerner visse CSS klasser, der animerer for at Vis / skjul overskriften bruger JavaScript til at registrere bevægelsen.

Du kan selv gøre denne funktionalitet, men hvorfor genere det? Hovedrummet er testet og understøtter alle større browsere. Det selv spiller godt med jQuery eller Zepto hvis du allerede har et JS-bibliotek installeret på dit websted.

Du finder masser af kodeprøver i GitHub repo men her er en simpelt eksempel der er målrettet mod #header element:

 var myElement = document.querySelector ("# header"); // Opret et hovedværktøjsobjekt, der passerer i #header elementet var hovedrummet = nyt hovedrum (myElement); // initialisere biblioteket headroom.init (); 

Det i det() funktion har masser af muligheder for at tilpasse. Du kan tilpasse de forskellige element klasser, sammen med forskellige begivenhed udløse callbacks hvor du kan integrere dine egne funktioner. For eksempel, hvis du vil have elementet til at falme, efter at det er ophævet, vil du bruge onUnpin ring tilbage.

Disse muligheder er alle opført på hoved plugin-siden, så tjek det ud og se, hvad du synes. Hvis du vil se Hovedrum i aktion se pennen under, der indeholder a fuld klon af hoveddemosiden.