Sticky header (przyklejony nagłówek) to pasek nawigacji, który pozostaje widoczny na górze ekranu podczas przewijania strony. Ułatwia dostęp do menu i ważnych przycisków, ale zabiera część miejsca, więc trzeba go dobrze zaprojektować.
Zalety i wady
- nawigacja zawsze pod ręką, bez wracania na górę strony,
- stała obecność logo i przycisku wezwania do działania,
- na telefonach zabiera cenną przestrzeń ekranu,
- może zasłaniać fragmenty treści przy przejściach do kotwic.
Jak zrobić to dobrze?
Zmniejsz wysokość nagłówka po przewinięciu strony albo chowaj go przy przewijaniu w dół i pokazuj przy przewijaniu w górę. W CSS wystarczy position: sticky; top: 0;. Dla kotwic dodaj scroll-margin-top na nagłówkach, aby nie chowały się pod paskiem.
Wpływ na wydajność i dostępność
Zmiana wysokości nagłówka w czasie przewijania może powodować przesunięcia układu (CLS), więc animuj właściwości, które nie zmieniają układu, np. transform. Sprawdź też, czy przy powiększeniu tekstu lub na małych ekranach nagłówek nie zajmuje większości widoku.