Loo Headroom.js abil automaatne peitevärk

Pealkirjade automaatne peitmine on juba mõnda aega olnud veebidisainis populaarne. Paljud blogid ja veebiajakirjad kasutavad kleepuvat päist hoida kasutajaid kaasatud ja anda neile otsene juurdepääs navigatsioonile.

Keskmine on selle funktsiooni uuesti põhikontseptsiooniga peidab navigatsiooni samal ajal kerimine alla aga näitab seda samal ajal kerimine üles. See mõiste on muutunud a metsikult populaarne trend ja nüüd saate kergesti seda korrata kasutades Headroom.js.

Headroom.js on a tasuta vanilje JavaScript-raamatukogu ilma sõltuvusteta või liigsete API funktsioonidega. Lisage see lihtsalt oma HTML-i, sihtige lehe päis ja lase tal töötada.

Lihtsalt pea lisab ja eemaldab teatud CSS klassid, mis animeerivad selleks, et näita / peida päis liikumise tuvastamiseks JavaScripti abil.

Sa võiksid selle funktsiooni ise teha, aga miks? Katse on testitud ja toetab kõiki peamisi brausereid. See on isegi mängib kena koos jQuery või Zepto kui teie saidile on juba installitud JS-raamatukogu.

Leiad palju koodiproove GitHub repos, kuid siin on a lihtne näide mis on suunatud #header element:

 var myElement = document.querySelector ("# päis"); // loo #headeri elemendi var headroom = new Headroom (myElement) läbiv peahoone objekt; // alustab raamatukogu headroom.init (); 

The selles() funktsioon on palju võimalusi kohandada. Te saate kohandada erinevaid elementide klassid, koos erinevate sündmuse käivitus kus sa saad kinnitage oma funktsioonid. Näiteks, kui soovite, et see element kaduks pärast seda, kui see on eemaldamata, kasutaksite seda onUnpin helista tagasi.

Need valikud on kõik loetletud peamise plugina lehel, kontrollige seda ja vaadake, mida sa arvad. Kui soovite seda näha Kõrgus ruumis vaadake allolevat pensüstelit, mis sisaldab a demo lehekülje täielik kloon.