Na długiej stronie użytkownik nie powinien wracać na samą górę tylko po to, by przejść do innej podstrony. Menu określane jako sticky menu pozostaje widoczne podczas przewijania, ale jego użyteczność zależy od wysokości, zachowania na telefonie i poprawnej implementacji. Wyjaśniam, kiedy takie rozwiązanie pomaga, jak zrobić je w CSS oraz jak uniknąć problemów z dostępnością, wydajnością i wygodą obsługi.
Stała nawigacja pomaga wtedy, gdy nie przeszkadza w czytaniu
- Menu sticky pozostaje przyklejone do krawędzi ekranu podczas przewijania.
- Najczęściej wystarczy position: sticky, bez rozbudowanego JavaScriptu.
- Na telefonie pasek powinien zajmować maksymalnie około 48-64 px wysokości.
- Trzeba sprawdzić zachowanie przy powiększeniu, klawiaturze i orientacji poziomej.
- Stałe menu nie poprawi samo z siebie SEO ani konwersji. Liczy się czytelna struktura i właściwy dobór linków.
Co daje menu pozostające na ekranie
Sticky menu to nawigacja, która podczas przewijania zatrzymuje się przy górnej krawędzi okna przeglądarki. Użytkownik nadal ma dostęp do logo, głównych kategorii, wyszukiwarki albo przycisku kontaktowego, zamiast przewijać stronę z powrotem do nagłówka.
Najlepiej działa na stronach, na których użytkownik długo czyta lub porównuje wiele informacji. Dotyczy to między innymi sklepów internetowych, serwisów informacyjnych, dokumentacji, landing page’y i blogów z rozbudowaną strukturą treści. Na krótkiej stronie z trzema sekcjami przyklejony pasek może być tylko niepotrzebnym dodatkiem.
W praktyce stała nawigacja skraca drogę do kolejnego działania. Czytelnik może przejść do kategorii, otworzyć wyszukiwarkę albo sprawdzić ofertę bez przerywania lektury. Trzeba jednak pamiętać, że każda nieruchoma belka zabiera część ekranu, a na smartfonie ten koszt jest szczególnie odczuwalny.
Kiedy to rozwiązanie ma sens
- Gdy strona ma dużo treści i użytkownicy często przechodzą między sekcjami.
- Gdy ważne działanie, na przykład kontakt lub koszyk, powinno być dostępne przez cały czas.
- Gdy nawigacja mieści się w jednym, niewysokim wierszu.
- Gdy testy pokazują, że użytkownicy rzeczywiście korzystają z menu podczas przewijania.
Nie wdrażam stałego menu tylko dlatego, że wygląda nowocześnie. Najpierw sprawdzam długość strony, dane z analityki i zachowanie użytkowników. Czasem lepszym rozwiązaniem jest zwykły nagłówek oraz widoczny przycisk „Wróć na górę”.
Sticky, fixed czy menu ukrywające się podczas scrollowania
Te rozwiązania bywają nazywane zamiennie, ale technicznie i użytkowo działają inaczej. Najważniejsza różnica dotyczy tego, czy element nadal zajmuje miejsce w układzie strony.
| Rozwiązanie | Jak działa | Największa zaleta | Typowe ryzyko |
|---|---|---|---|
position: sticky |
Element przewija się wraz z dokumentem, a po dojściu do określonej pozycji przykleja się do ekranu. | Prosta implementacja i zachowanie miejsca w układzie. | Może nie zadziałać przez ustawienia kontenera nadrzędnego. |
position: fixed |
Element jest stale przytwierdzony do okna przeglądarki i nie zależy od naturalnego przepływu dokumentu. | Pełna kontrola nad położeniem. | Może zasłaniać treść i wymagać dodatkowego odstępu. |
| Menu auto-hide | Belka znika przy przewijaniu w dół i wraca przy przewijaniu w górę. | Więcej miejsca na treść. | Użytkownik może nie wiedzieć, gdzie chwilowo zniknęła nawigacja. |
W większości standardowych stron zacząłbym od position: sticky. Daje efekt przyklejenia bez konieczności ręcznego nasłuchiwania scrolla w JavaScript. Menu fixed zostawiłbym dla interfejsów, w których stały panel jest częścią całego doświadczenia, na przykład aplikacji webowej.
Ukrywanie menu podczas scrollowania może poprawić komfort na małym ekranie, ale wymaga subtelnej animacji i przewidywalnego działania. Nagłe znikanie nawigacji, zwłaszcza podczas czytania artykułu, szybko zaczyna irytować. Jeśli pasek ma się chować, powinien wracać po niewielkim ruchu w górę i być zawsze dostępny po dotknięciu górnej krawędzi.
Jak zrobić stałe menu w HTML i CSS
Najprostsza wersja nie wymaga biblioteki ani skryptu. Semantyczny element nav opisuje nawigację, a CSS określa moment jej przyklejenia.
.site-nav {
position: sticky;
top: 0;
z-index: 10;
min-height: 64px;
display: flex;
align-items: center;
gap: 24px;
padding: 12px 20px;
background: #ffffff;
border-bottom: 1px solid #e5e5e5;
}
.site-nav a {
color: #202020;
text-decoration: none;
}
.site-nav a:focus-visible {
outline: 3px solid #155eef;
outline-offset: 3px;
}Właściwość top: 0 mówi przeglądarce, przy której krawędzi ma zatrzymać element. z-index ustawia go nad treścią, a nieprzezroczyste tło zapobiega mieszaniu się tekstu artykułu z linkami menu.
Dlaczego sticky czasem nie działa
Najczęstszą przyczyną jest rodzic z ustawieniem overflow: hidden, overflow: auto albo overflow: scroll. Przeglądarka może wtedy traktować ten kontener jako obszar przewijania i ograniczyć działanie przyklejenia. Sprawdzam też, czy rodzic ma wystarczającą wysokość, bo element nie przyklei się tam, gdzie nie ma przestrzeni do przewijania.
Problem pojawia się również w skomplikowanych układach Flexbox i CSS Grid. Pomaga ustawienie align-self: start albo usunięcie niepotrzebnego rozciągania elementu. W narzędziach deweloperskich warto tymczasowo wyłączyć reguły overflow, wysokości i transformacje na kolejnych przodkach menu.
Jeżeli w górnej części strony znajduje się jeszcze pasek informacyjny, nie ustawiam drugiego elementu na top: 0. Każdy kolejny poziom powinien dostać własną wartość, na przykład top: 32px, inaczej elementy będą nachodzić na siebie.
Jak zaprojektować je na komputerze i telefonie
Na dużym ekranie menu może zawierać logo, kilka głównych kategorii, wyszukiwarkę i przycisk akcji. Na telefonie ta sama zawartość zwykle się nie mieści, dlatego należy ograniczyć pasek do logo, przycisku menu i jednego najważniejszego działania.
Nie zmniejszałbym bez końca rozmiaru tekstu, aby upchnąć wszystkie linki. Lepszy jest przycisk otwierający panel boczny lub rozwijane menu. Panel powinien mieć wyraźny przycisk zamknięcia, logiczną kolejność elementów i możliwość zamknięcia po naciśnięciu klawisza Escape.
Rozsądne parametry interfejsu
- Wysokość paska mobilnego zwykle mieści się w przedziale 48-64 px.
- Obszar klikalny ikony powinien mieć około 44 × 44 px, nawet jeśli sama ikona jest mniejsza.
- Kontrast tekstu i tła powinien spełniać wymagania WCAG, a focus klawiatury musi być widoczny.
- Animacja pojawiania się menu powinna trwać krótko, zwykle około 150-250 ms.
- Przy wcięciu urządzenia i bezpiecznych obszarach warto uwzględnić
env(safe-area-inset-top).
Na stronie z dużym nagłówkiem często stosuję wariant hybrydowy. Pełny header znika po przewinięciu, a pozostaje tylko kompaktowa belka z logo i podstawową nawigacją. Dzięki temu użytkownik zachowuje orientację, ale treść nie traci połowy wysokości ekranu.
Unikam też przesadnie ciężkich cieni i efektów rozmycia. Pasek powinien odróżniać się od tła, lecz nie dominować nad artykułem. W przypadku bloga najważniejsza nadal jest czytelność tekstu, a nie demonstracja możliwości CSS.
Dostępność, szybkość i SEO wymagają osobnego testu
Stała nawigacja nie jest automatycznie dostępna tylko dlatego, że działa myszką. Sprawdzam przejście po wszystkich linkach klawiszem Tab, widoczność focusu oraz to, czy rozwijane menu poprawnie komunikuje stan za pomocą aria-expanded. Do nawigacji używam prawdziwych linków i przycisków, a nie elementów div udających kontrolki.
Przy powiększeniu strony do 200% menu nie powinno zasłaniać głównej treści ani tworzyć poziomego scrolla. Testuję także szerokość około 320 px, orientację poziomą telefonu i długie etykiety linków. Zbyt wysoka belka może pozostawić osobie korzystającej z powiększenia tylko wąski fragment strony.
Anchor linki, czyli odsyłacze do konkretnych sekcji dokumentu, wymagają dodatkowej korekty. Jeśli nagłówek wskazanej sekcji chowa się pod stałym paskiem, dodaję na przykład:
section {
scroll-margin-top: 80px;
}Od strony wydajności najlepiej, gdy efekt opiera się na CSS. Skrypt reagujący na każde przewinięcie może powodować niepotrzebną pracę przeglądarki, szczególnie na słabszym telefonie. Jeżeli JavaScript jest konieczny, ograniczam częstotliwość obsługi zdarzeń i unikam ciągłego przeliczania układu strony.
Samo przyklejenie menu nie daje bezpośredniej przewagi w wynikach wyszukiwania. Może jednak pośrednio wspierać doświadczenie użytkownika, jeśli ułatwia przejście do ważnych sekcji i nie pogarsza czytelności. Dla SEO ważniejsze pozostają semantyczny HTML, logiczne linkowanie wewnętrzne, szybkość oraz użyteczna treść.
Przeczytaj również: SSL co to jest i jak poprawnie wdrożyć HTTPS?
Lista kontrolna przed publikacją
- Przewiń stronę na komputerze i telefonie, sprawdzając, czy menu nie zasłania treści.
- Otwórz wszystkie elementy nawigacji bez używania myszy.
- Powiększ stronę do 200% i sprawdź, czy nadal da się dotrzeć do każdej sekcji.
- Przetestuj długie nazwy kategorii, mały ekran i orientację poziomą.
- Zmierz wpływ skryptów i animacji na wydajność w narzędziach deweloperskich.
- Porównaj zachowanie z wersją bez stałej belki, korzystając z analityki lub krótkiego testu użytkowników.
Jak zdecydować, czy stała nawigacja pasuje do strony
Najbezpieczniejsza decyzja nie brzmi „zawsze używaj” ani „nigdy nie używaj”. Jeżeli strona jest długa, ma rozbudowaną strukturę i ważne działania dostępne z wielu miejsc, przyklejone menu może realnie skrócić drogę użytkownika. Jeśli najważniejsza jest spokojna lektura, lepiej zastosować mniejszy pasek albo pozostawić nawigację poza ekranem.
Ja zaczynam od prostego wariantu CSS, ograniczam liczbę elementów i testuję go na prawdziwym urządzeniu. Dopiero później dodaję chowanie przy scrollowaniu, animacje czy różne wersje zachowania. Dobre menu sticky powinno być prawie niezauważalne: użytkownik ma szybciej znaleźć drogę, a nie zastanawiać się, dlaczego pasek zasłania mu artykuł.
