Pozycjonowanie fixed i sticky
Przypną Państwo elementy do obszaru widoku lub utworzą nagłówki i paski boczne przyklejane podczas przewijania.
Pozycjonowanie fixed i sticky to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.
position: fixed
Element pozycjonowany za pomocą fixed jest umieszczany względem obszaru widoku przeglądarki i pozostaje na swoim miejscu nawet podczas przewijania strony. Jest także usuwany z przepływu dokumentu.
<div class="sticky-nav">Fixed navigation bar</div>
<p>Scroll content below the fixed nav...</p>
Zastosowania pozycjonowania fixed
Typowe zastosowania position: fixed:
- Paski nawigacji pozostające na górze
- Pływające przyciski akcji (FAB)
- Widżety czatu w prawym dolnym rogu
- Banery zgody na pliki cookie
- Warstwy modalne
Kompensowanie stałych nagłówków
Stałe nagłówki nachodzą na znajdującą się pod nimi zawartość. Należy dodać dopełnienie lub margines u góry równy wysokości nagłówka, aby przesunąć zawartość w dół:
<div class="nav">Fixed Header (64px)</div>
<p>Page content starts safely below the header thanks to padding-top.</p>
Elementy nadrzędne z transform i fixed
Istotna osobliwość: jeśli do elementu nadrzędnego zastosowano CSS transform, perspective lub filter, pozycjonowanie fixed staje się względem tego elementu nadrzędnego, a nie obszaru widoku. To częsty błąd.
position: sticky
position: sticky to rozwiązanie hybrydowe: element przewija się normalnie, dopóki nie osiągnie określonego progu (np. top: 0), a następnie przykleja się w miejscu wewnątrz kontenera nadrzędnego.
<div class="table-header"><table><thead><tr><th>Name</th><th>Score</th></tr></thead><tbody><tr><td>Row 1</td><td>10</td></tr><tr><td>Row 2</td><td>20</td></tr><tr><td>Row 3</td><td>30</td></tr><tr><td>Row 4</td><td>40</td></tr><tr><td>Row 5</td><td>50</td></tr></tbody></table></div>
sticky wymaga przewijanego elementu nadrzędnego
Element sticky przykleja się wewnątrz swojego bloku zawierającego. Jeśli element nadrzędny nie jest wystarczająco wysoki, aby można było go przewijać, sticky nie zadziała. Element nadrzędny nie może mieć ustawionego overflow na hidden.
Top, right, bottom, left dla sticky
Aby sticky się uaktywniło, trzeba zdefiniować co najmniej jedno przesunięcie. Typowe wzorce:
<div class="header">Sticky Header</div>
<div class="sidebar">Sticky Sidebar</div>
<div class="footer">Sticky Footer</div>
Przyklejane nagłówki tabel
Sticky doskonale sprawdza się w przypadku nagłówków tabel w przewijanych opakowaniach tabel — nagłówek pozostaje widoczny podczas przewijania wierszy.
<div class="table-wrapper"><table><thead><tr><th>Product</th><th>Price</th></tr></thead><tbody><tr><td>Apple</td><td>$1</td></tr><tr><td>Bread</td><td>$3</td></tr><tr><td>Milk</td><td>$2</td></tr><tr><td>Eggs</td><td>$4</td></tr><tr><td>Cheese</td><td>$5</td></tr></tbody></table></div>
Wzorzec przyklejanego panelu bocznego
Klasyczny przyklejany panel boczny, który pozostaje widoczny podczas przewijania głównej zawartości:
<div class="layout"><div class="sidebar">Sticky sidebar content</div><div class="main">Main scrolling content area with lots of text to scroll through.</div></div>
Podsumowanie fixed a sticky
Najważniejsze różnice:
- Fixed: zawsze względem obszaru widoku, zawsze poza przepływem
- Sticky: przewija się z zawartością do osiągnięcia progu, pozostaje w przepływie i zatrzymuje się na granicy elementu nadrzędnego
Wydajność: fixed i warstwy
Elementy fixed tworzą nowy kontekst nakładania i mogą powodować ponowne układanie podczas przewijania, jeśli nachodzą na obszary ponownego renderowania. Należy utrzymywać elementy fixed w prostej formie i unikać kosztownych właściwości, takich jak box-shadow.
Szybkie sprawdzenie
Jakie ograniczenie ma position: sticky, którego nie ma position: fixed?
Podsumowanie
position: fixed zakotwicza elementy względem obszaru widoku, dzięki czemu można tworzyć przyklejaną nawigację i warstwy nakładane. position: sticky przewija się normalnie do osiągnięcia progu, a następnie przykleja się — doskonale nadaje się do nagłówków tabel i paneli bocznych. Oba rozwiązania wymagają co najmniej jednej właściwości przesunięcia, aby przyklejanie mogło się uaktywnić.
Często zadawane pytania
Czy lekcja „Pozycjonowanie fixed i sticky” jest bezpłatna?
Tak — pełny tekst „Pozycjonowanie fixed i sticky” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Pozycjonowanie fixed i sticky”?
Przypną Państwo elementy do obszaru widoku lub utworzą nagłówki i paski boczne przyklejane podczas przewijania. Ćwiczysz CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć CSS Academy?
Nie wymagamy żadnego doświadczenia. CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.
Ile czasu zajmuje lekcja „Pozycjonowanie fixed i sticky”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji CSS Academy?
Tak. Każda lekcja CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Pozycjonowanie static i relative
- Pozycjonowanie absolute i blok zawierający
- Pozycjonowanie fixed i sticky
- z-index i kontekst stosu