Skapa ett självhäftande klistermärke med Headroom.js

Automatisk skjuthuvud har varit stadigt populär i webbdesign under en stund. Många bloggar och onlinemagasiner använder den klibbiga rubriken till hålla användare engagerade och ge dem direkt tillgång till navigeringen.

Medium har omdefiniera denna funktion med ett grundläggande begrepp som döljer navigeringen medan rullar ner men visar det medan rullar upp. Detta koncept har blivit en väldigt populär trend och nu kan du enkelt replikera det använder sig av Headroom.js.

Headroom.js är en gratis vanilj JavaScript-bibliotek utan beroenden eller överdriven API-funktioner. Du lägger bara till den i din HTML, riktar sidhuvudet och låt den springa.

Huvudrummet enkelt lägger till och tar bort vissa CSS-klasser som animerar för att visa / dölja rubriken använder JavaScript för att upptäcka rörelsen.

Du kan göra denna funktion själv, men varför stör? Huvudrummet testas och stöder alla större webbläsare. Det ens spelar trevligt med jQuery eller Zepto om du redan har ett JS-bibliotek installerat på din webbplats.

Hittar du gott om kodprover i GitHub repo men här är a enkelt exempel som riktar sig mot #rubrik element:

 var myElement = document.querySelector ("# header"); // skapa ett Headroom-objekt som passerar i #header-elementet var huvudrummet = nytt huvudrum (myElement); // initiera biblioteket headroom.init (); 

De i det() funktionen har gott om alternativ att anpassa. Du kan anpassa de olika element klasser, tillsammans med olika händelse utlösare återkopplingar där du kan bädda in dina egna funktioner. Om du till exempel vill att elementet ska blekna efter att det är ospänt, skulle du använda onUnpin ring tillbaka.

Dessa alternativ är alla listade på huvud plugin-sidan, så kolla in det och se vad du tycker. Om du vill se Huvudrummet i åtgärd ta en titt på penna nedanför som innehåller a full klon på huvuddemosidan.