Utwórz auto-ukrywający się nagłówek z Headroom.js

Automatyczne ukrywanie nagłówków są stale popularne w projektowaniu stron internetowych od dłuższego czasu. Wiele blogów i czasopism internetowych używa lepkiego nagłówka do utrzymuj zaangażowanie użytkowników i dać im bezpośredni dostęp do nawigacji.

Medium ma przedefiniować tę funkcję z podstawową koncepcją ukrywa nawigację podczas przewijanie w dół ale pokazuje to podczas przewijanie w górę. Ta koncepcja stała się szalenie popularny trend a teraz możesz łatwo powtórz to za pomocą Headroom.js.

Headroom.js to darmowa biblioteka waniliowa JavaScript bez zależności lub nadmiernych funkcji API. Po prostu dodajesz go do kodu HTML, kierujesz nagłówek strony i odpuszczasz.

Prosta przestrzeń dodaje i usuwa niektóre klasy CSS, które animują w celu pokaż / ukryj nagłówek używanie JavaScript do wykrywania ruchu.

Możesz zrobić tę funkcję samodzielnie, ale po co? Headroom jest testowany i obsługuje wszystkie główne przeglądarki. To nawet gra dobrze z jQuery lub Zepto jeśli masz już zainstalowaną bibliotekę JS w swojej witrynie.

Znajdziesz mnóstwo próbek kodu w repozytorium GitHub, ale oto prosty przykład który celuje w #nagłówek element:

 var myElement = document.querySelector („# header”); // utwórz obiekt Headroom przechodzący w elemencie #header var headroom = new Headroom (myElement); // zainicjuj bibliotekę headroom.init (); 

The w tym() funkcja ma wiele opcji do dostosowania. Możesz dostosować różne klasy elementów, wraz z innymi wywołania zwrotne wyzwalacza zdarzeń gdzie możesz osadzić własne funkcje. Na przykład, jeśli chcesz, aby element zniknął po odpięciu, użyłbyś onUnpin oddzwonić.

Wszystkie te opcje są wymienione na głównej stronie wtyczki, więc sprawdź to i zobacz, co myślisz. Jeśli chcesz zobaczyć Zapas w akcji spójrz na pióro poniżej, które zawiera pełny klon głównej strony demonstracyjnej.