sticky — CSS — kod. pyk

position: sticky pozwala elementowi zachowywać się zwyczajnie, aż osiągnie podaną pozycję podczas przewijania.

Cel lekcji

Poznać zagadnienie „sticky”, zrozumieć przykład i umieć zastosować podobny zapis we własnym programie.

Wyjaśnienie krok po kroku

Efekt zależy m.in. od przewijającego kontenera.

Najpierw przeanalizuj kod bez uruchamiania. Zwróć uwagę, jakie dane wykorzystuje program, co z nimi robi i skąd bierze się wynik pokazany pod przykładem.

Praktyczny przykład

Gdzie zobaczysz efekt: Wygląd strony w przeglądarce

.menu {
  position: sticky;
  top: 0;
  background: white;
}

Przeczytaj kod linijka po linijce

.menu {Wybieramy elementy, które mają otrzymać podane style.
position: sticky;Przypisujemy wartość wybranej właściwości CSS.
top: 0;Przypisujemy wartość wybranej właściwości CSS.

Oczekiwany wynik / efektpo uruchomieniu przykładu

Menu może pozostać przy górnej krawędzi w obrębie swojego kontenera.

◉Podgląd w przeglądarceHTML/CSS — bez uruchamiania skryptów

Jak utrwalić tę umiejętność?

Przepisz kod samodzielnie. Następnie zmień jedną wartość lub jedną instrukcję i spróbuj przewidzieć efekt. Dopiero potem uruchom zmienioną wersję. Jeśli wynik jest inny niż oczekiwany, porównaj kolejne linie.

Spróbuj samodzielnie

Dodaj sticky do paska nawigacji.