Vytvořit automatickou skrytí Sticky Header s Headroom.js

Auto-skrývá záhlaví byly dlouho populární ve web design. Mnoho blogů a online magazínů používá lepící hlavičku udržet uživatele v kontaktu a přímý přístup k navigaci.

Médium má předefinovat tuto funkci se základním pojmem skryje navigaci zatímco rolování dolů ale ukazuje to zatímco rolování nahoru. Tento koncept se stal divoce populární trend a teď můžete snadno replikovat použitím Headroom.js.

Headroom.js je zdarma vanilla JavaScript knihovna bez závislostí nebo nadměrných funkcí API. Stačí jej přidat do HTML, zacílit na hlavičku stránky a nechat ji běžet.

Prostorně přidává a odstraňuje určité třídy CSS, které se animují v následujících situacích zobrazit / skrýt záhlaví použití JavaScriptu k detekci pohybu.

Dalo by se udělat tuto funkci sami, ale proč se obtěžovat? Testuje se světlá výška a podporuje všechny hlavní prohlížeče. Dokonce hraje pěkně s jQuery nebo Zepto Pokud již máte na svých stránkách nainstalovanou knihovnu JS.

Najdeš dostatek vzorků kódu v repo GitHub, ale tady je jednoduchý příklad které se zaměřují na. \ t #header živel:

 var myElement = document.querySelector ("# header"); // vytvořit objekt Headroom, který projde elementem #header var headroom = new Headroom (myElement); // inicializovat headroom.init knihovny (); 

init () funkce spousta možností přizpůsobení. Můžete přizpůsobit různé třídy prvků, spolu s různými zpětné volání události kde můžeš Vložit své vlastní funkce. Například, pokud chcete, aby prvek zmizel poté, co je odpojen, používali byste onUnpin zpětné volání.

Tyto možnosti jsou všechny na hlavní stránce pluginu, tak se podívejte a podívejte se, co si myslíte. Pokud chcete vidět Prostor v akci podívejte se na pero níže, které obsahuje plný klon hlavní demo stránky.