Sticky header: CSS position: sticky i chowanie przy przewijaniu
Przewodnik po sticky header
Sticky header w CSS: position sticky, zmniejszanie, chowanie | We.Inc
Zrób przyklejony nagłówek z position: sticky, a potem dodaj zmniejszanie i chowanie przy przewijaniu. Demo na żywo, przesunięcia kotwic przez scroll-margin, poprawki z-index i mały hook React.
Nadaj nagłówkowi position: sticky i top: 0, a do tego tło i z-index, a pozostanie przypięty podczas przewijania strony. Przykleja się tylko w obrębie swojego rodzica, a przodek z ustawionym overflow może to zablokować. Aby nagłówek chował się przy przewijaniu, przełączaj klasę z translateY w nasłuchiwaczu zdarzenia scroll.
sticky a fixed w nagłówkach
position: sticky
position: fixed
Zajmuje miejsce w układzie
Tak
Nie, dodaj padding do body
Przypięty względem
Najbliższego przewijanego przodka
Viewportu
Wymaga wartości inset, np. top: 0
Tak, inaczej działa jak relative
Zwykle
Tworzy kontekst nakładania
Tak
Tak
Zatrzymuje się na końcu rodzica
Tak
Nie
Przyklejony nagłówek to jedna linijka CSS, dopóki coś się nie zepsuje: nagłówek nie chce się przykleić, linki do kotwic lądują pod nim albo rozwijane menu chowa się za treścią. Ta strona omawia tę linijkę CSS, a potem każdą z tych awarii, z demem przewijania na żywo, w którym przełączasz tryb zwykły, zmniejszający i chowający.
Przewijaj wewnątrz pola demo. Nagłówek jest przyklejony do tego pola, tak samo jak prawdziwy nagłówek przykleja się do strony.
Przełącz tryb na zmniejszanie lub chowanie przy przewijaniu i przewiń ponownie w obu kierunkach.
Kliknij link do sekcji w demo, aby zobaczyć, jak scroll-margin-top utrzymuje nagłówek sekcji poniżej nagłówka strony.
Skopiuj CSS i hook pasujące do wybranego trybu.
Jeśli sticky nic nie robi, poszukaj przodka z overflow: hidden, auto lub scroll. Nagłówek przykleja się wtedy do tego pola zamiast do strony.
Element sticky nie może opuścić swojego rodzica. Umieść nagłówek bezpośrednio w body albo w kontenerze wysokim jak cała strona.
Nadaj nagłówkowi pełne lub lekko przezroczyste tło, inaczej treść będzie przez niego prześwitywać podczas przewijania.
Ustaw scroll-padding-top na html równe wysokości nagłówka, aby każdy link do kotwicy i element z fokusem zatrzymywał się poniżej.
Szanuj ograniczony ruch: pomiń animację wysuwania dla osób, które poprosiły o mniej ruchu.
Najczęściej zadawane pytania
Dlaczego moje position: sticky nie działa?
Trzy typowe przyczyny: brak wartości inset, np. top: 0, rodzic kończący się zaraz po nagłówku, więc nie ma miejsca na przyklejenie, albo przodek z overflow innym niż visible, który staje się polem, do którego przykleja się nagłówek. Sprawdź je w tej kolejności.
Nagłówek powinien być sticky czy fixed?
Sticky jest prostszy, bo zachowuje swoje miejsce w układzie, więc nic nie przeskakuje pod nim na górze strony. Fixed przydaje się, gdy nagłówek musi leżeć nad pełnoekranową sekcją hero, ale wtedy sam dodajesz padding do strony.
Jak sprawić, by linki do kotwic nie chowały się pod przyklejonym nagłówkiem?
Dodaj scroll-padding-top do przewijanego kontenera, zwykle html, równe wysokości nagłówka. Dla pojedynczych celów możesz zamiast tego ustawić scroll-margin-top na samym nagłówku sekcji.
Dlaczego rozwijane menu pojawia się za treścią strony?
Pozycjonowanie sticky tworzy kontekst nakładania, więc wszystko w nagłówku może układać się warstwowo tylko w jego obrębie. Podnieś sam nagłówek przez z-index wyższy niż dalsza treść, na przykład z-index: 50, zamiast podnosić rozwijane menu.
Jak naprawdę działa sticky
Element sticky zaczyna w normalnym przepływie. Gdy przewijanie przeniosłoby go poza jego inset, czyli top: 0 dla nagłówka, utrzymuje tę pozycję, aż dół rodzica do niego dotrze i go wypchnie.
Pole, do którego się przykleja, to najbliższy przodek z mechanizmem przewijania, co obejmuje też overflow: hidden. Dlatego kontener dodany, aby przyciąć karuzelę, może po cichu zepsuć nagłówek daleko od niej.
Chowaj przy przewijaniu w dół, pokazuj przy przewijaniu w górę
Porównuj bieżącą pozycję przewijania z poprzednią. Ruch w dół poza mały próg chowa nagłówek przez transform: translateY(-100%); każdy ruch w górę przywraca go.
Animuj transform zamiast top czy height, bo transformacja nie wywołuje przeliczania układu. Nasłuchuj zdarzenia scroll z opcją passive, aby przeglądarka nigdy nie czekała na Twój handler.
Zmniejszanie bez skoków układu
Zmiana wysokości nagłówka podczas przyklejenia przesuwa treść pod nim. Zachowaj stałą zewnętrzną wysokość i zmniejszaj logo przez transform: scale albo redukuj padding wewnątrz nagłówka, który już nie zawadza.
Atrybut data, np. data-scrolled na nagłówku, trzyma reguły stylów w CSS, a skrypt ogranicza do jednej linijki.
Podstawowy przyklejony nagłówek
Przyklejony nagłówek na przewijanej stronie
Przewiń ramkę. Nagłówek zostaje na górze, a link do kotwicy zatrzymuje się pod nim dzięki scroll-padding-top.
Chowaj przy przewijaniu w dół, pokazuj przy przewijaniu w górę
CSS dla stanów ukrytego i zmniejszonego
Skrypt ustawia tylko atrybuty data. Każda zmiana wizualna jest w CSS.
Hook React: useHideOnScroll
Zwraca dwie wartości logiczne, które możesz rozłożyć na nagłówek jako atrybuty data. Próg 8px ignoruje drobne drgania.
Pułapki przyklejonego nagłówka
Objawy i rozwiązania
Objaw
Przyczyna
Rozwiązanie
Nagłówek odjeżdża przy przewijaniu
Brak wartości top
Dodaj top: 0
Nagłówek odjeżdża przy przewijaniu
Przodek ma overflow: hidden
Przenieś overflow do mniejszego kontenera albo użyj overflow: clip
Przykleja się, potem znika za wcześnie
Rodzic jest za niski
Umieść nagłówek w body lub w kontenerze o pełnej wysokości
Nagłówki kotwic są zasłonięte
Brak przesunięcia przewijania
scroll-padding-top na html
Menu chowa się za treścią
Za niski kontekst nakładania nagłówka
z-index na samym nagłówku
Treść prześwituje
Przezroczyste tło
Nadaj nagłówkowi kolor tła
Zwykły sticky
Zmniejszanie
Chowanie przy przewijaniu
Wstęp
Funkcje
Cennik
Kontakt
Demo przewijania na żywo
Przełączaj między trybem zwykłym, zmniejszaniem i chowaniem przy przewijaniu, a potem przewijaj wewnątrz pola.