Kurs HTML

Wprowadzenie: Pozycjonowanie "przyklejone"

Wartość position: sticky; to stosunkowo nowa i bardzo przydatna metoda pozycjonowania w CSS. Łączy ona w sobie cechy pozycjonowania relatywnego (relative) i stałego (fixed).

Element z position: sticky; zachowuje się jak element z position: relative; do momentu, aż podczas przewijania strony jego pozycja względem viewportu osiągnie określoną wartość progową (zdefiniowaną przez top, right, bottom lub left). W tym momencie element "przykleja się" do krawędzi viewportu i zaczyna zachowywać się jak element z position: fixed;, pozostając w tym miejscu podczas dalszego przewijania w obrębie swojego kontenera nadrzędnego.

position: sticky; jest idealne do tworzenia elementów, które mają być normalnie w przepływie, ale mają "podążać" za użytkownikiem podczas przewijania pewnego obszaru, np. nagłówki sekcji, paski boczne w długich artykułach, czy nagłówki tabel.

Jak działa position: sticky;?

• Wymaga progu przesunięcia: Aby position: sticky; zadziałało, musisz określić co najmniej jedną właściwość przesunięcia (top, right, bottom lub left) inną niż auto. Ta wartość definiuje próg, przy którym element ma się "przykleić". Na przykład top: 0; oznacza, że element przyklei się do górnej krawędzi viewportu, gdy jego normalna pozycja osiągnie tę krawędź podczas przewijania.
• Zachowanie początkowe (jak relative): Dopóki próg nie zostanie osiągnięty, element zachowuje się jakby miał position: relative; - pozostaje w normalnym przepływie dokumentu i zajmuje swoje miejsce.
• Zachowanie po osiągnięciu progu (jak fixed): Gdy podczas przewijania element osiągnie zdefiniowany próg (np. top: 0;), zmienia swoje zachowanie na podobne do position: fixed; względem swojego **najbliższego przodka z mechanizmem przewijania (scrolling ancestor)** lub viewportu. Pozostaje "przyklejony" w tym miejscu.
• Ograniczenie do kontenera: Co ważne, element "przyklejony" za pomocą sticky pozostaje w tym stanie tylko tak długo, jak długo jego **kontener nadrzędny** jest widoczny w viewporcie. Gdy kontener nadrzędny zostanie przewinięty poza ekran, element sticky również zniknie razem z nim (w przeciwieństwie do fixed, które zawsze pozostaje względem viewportu).
• Tworzy nowy kontekst stosu: Podobnie jak fixed, tworzy nowy kontekst stosu.

<div class="container">
  <h2 class="sticky-header">Przyklejony nagłówek sekcji</h2>
  <p>Dużo treści w tej sekcji...</p>
  <!-- ...więcej treści... -->
</div>
<div class="another-section">
  <p>Kolejna sekcja strony...</p>
</div>

.container {
  height: 800px; /* Kontener musi być wystarczająco wysoki */
  overflow: auto; /* Lub przewijanie na body/html */
  border: 1px solid gray;
  margin-bottom: 20px;
}

.sticky-header {
  position: sticky;
  top: 0; /* Przyklei się do góry, gdy osiągnie tę pozycję */
  background-color: lightblue;
  padding: 10px;
  margin: 0; /* Usuń domyślne marginesy nagłówka */
  z-index: 10; /* Opcjonalnie, aby był na wierzchu */
}

.another-section {
    height: 500px;
    background: lightyellow;
}

/* Dodajmy trochę stylów dla treści */
.container p {
    padding: 0 10px;
    line-height: 1.6;
}
.container p:first-of-type {
    margin-top: 20px; /* Odstęp od nagłówka */
}

W powyższym przykładzie, .sticky-header będzie normalnie na początku .container. Gdy użytkownik zacznie przewijać .container (lub całą stronę, jeśli .container jest wystarczająco duży), nagłówek przesunie się w górę. Kiedy górna krawędź nagłówka dotknie górnej krawędzi viewportu (top: 0;), nagłówek "przyklei się" i pozostanie na górze, podczas gdy reszta treści .container będzie się pod nim przewijać. Gdy cały .container zostanie przewinięty poza ekran, nagłówek również zniknie.

Wsparcie przeglądarek i potencjalne problemy

• Wsparcie: position: sticky; jest obecnie dobrze wspierane przez nowoczesne przeglądarki, ale starsze wersje (zwłaszcza IE11) go nie obsługują. Zawsze warto sprawdzić kompatybilność na stronach typu Can I use.
• Wymagany przodek z przewijaniem: Element sticky przykleja się względem najbliższego przodka, który ma mechanizm przewijania (np. overflow: scroll;, overflow: auto;, overflow: hidden;) lub względem viewportu, jeśli żaden taki przodek nie istnieje. Jeśli rodzic elementu sticky nie ma wystarczającej wysokości lub nie ma ustawionego overflow, efekt przyklejenia może nie zadziałać zgodnie z oczekiwaniami.
• Konflikty z overflow: hidden: Jeśli którykolwiek z przodków elementu sticky ma ustawione overflow: hidden;, może to uniemożliwić działanie sticky.