Hozzon létre egy Auto-Hiding Sticky Header-ot Headroom.js segítségével

A fejlécek automatikus elrejtése a web design-ban már egy ideje népszerűek. Sok blog és online magazin használja a ragadós fejlécet tartsa a felhasználókat és közvetlen hozzáférést biztosít a navigációhoz.

Közepes újra definiálja ezt a funkciót alapkoncepcióval elrejti a navigációt míg lefelé görgetve de azt mutatja míg felfelé görgetés. Ez a koncepció a vadul népszerű trend és most könnyen ismételje meg használva Headroom.js.

Headroom.js a ingyenes vanília JavaScript könyvtár függőségek vagy túlzott API-funkciók nélkül. Csak hozzáadja a HTML-hez, célozza az oldalfejlécet, és hagyja, hogy futjon.

Fejtér egyszerűen hozzáad és eltávolít bizonyos CSS osztályokat, amelyek animálnak azért, hogy a fejléc megjelenítése / elrejtése a JavaScript használatával a mozgás észleléséhez.

Lehet, hogy ezt a funkcionalitást magad, de miért zavar? A helyiséget tesztelik és támogatja az összes fontosabb böngészőt. Még JQuery-vel vagy Zepto-val szépen játszik ha már van telepítve JS könyvtárunk.

Megtalálod rengeteg kódmintát a GitHub repóban, de itt van egy egyszerű példa amely a #fejléc elem:

 var myElement = document.querySelector ("# header"); // hozzon létre egy fejtér objektumot, amely a #header elemben a var headroom = new Headroom (myElement); // inicializálja a könyvtár headroom.init (); 

A benne() funkciója van rengeteg lehetőség van a testreszabásra. A különbözőeket testreszabhatja elemosztályok, együtt más esemény kiváltó visszahívások ahol tudsz beágyazza saját funkcióit. Például, ha azt szeretné, hogy az elem elhalványuljon, miután megmaradt, használná a onUnpin visszahív.

Ezek az opciók mind a fő plugin oldalon, ezért nézd meg és nézd meg, mit gondolsz. Ha látni akarod Magasság a cselekvésben nézd meg az alábbi tollat, amely a a fő demóoldal teljes klónja.