position: sticky to element hybrydowy: zachowuje się jak relative (pozostaje w normalnym przepływie) dopóki nie przewinie do określonego progu, a następnie zachowuje się jak fixed (pozostaje w miejscu) — ale tylko jeśli jego blok zawierający jest wciąż widoczny na ekranie.
.section-header {
position: sticky;
top: 0; /* sticks when its top edge reaches the viewport top */
}
Wartość top (lub bottom/left/right) jest wymagana — określa próg. Bez niej sticky nic nie robi.
Element sticky jest ograniczony do swojego kontenera rodzicielskiego. Przylega podczas przewijania przez rodzica, a następnie przewija się poza widok, gdy dolna krawędź rodzica przejdzie poza ekran. To sprawia, że "lepkie nagłówki sekcji" działają — każdy nagłówek przylega tylko podczas gdy jego własna sekcja jest widoczna.
1. Przodek ma overflow: hidden/auto/scroll. To jest przyczyna #1. Sticky positioning jest uszkodzony przez każdy przodka z możliwością przewijania, ponieważ element przylega względem tego kontenera przewijania, a nie strony:
.wrapper { overflow: hidden; } /* ❌ silently kills sticky on descendants */
2. Rodzic nie jest wystarczająco wysoki. Sticky działa tylko jeśli rodzic jest wyższy niż element sticky — jeśli rodzic ma tę samą wysokość, nie ma nic do przewijania, więc nigdy nie będzie wyglądać na przylgnięty.
3. Brak ustawionego progu. Zapomnienie top/bottom oznacza brak punktu przylgnięcia.
4. Ograniczenia wysokości rodzica (np. flex parent rozciągający elementy) mogą również usunąć przestrzeń przewijania.
✓ Did I set top/bottom/left/right?
✓ Does ANY ancestor have overflow other than visible?
✓ Is the parent container taller than the sticky element?
position: sticky obsługuje lepkie nagłówki, nagłówki tabel, paski boczne i interfejsy "scrollspy" bez JavaScript.
Ale jego osobliwości — zwłaszcza że overflow na każdym przodku po cichu to psuje — sprawiają, że jest to częste źródło debugowania "dlaczego to się nie przylgnie?"
Znajomość zakresu bloku zawierającego i pułapki overflow to to, co pozwala używać go niezawodnie.