Alert
Vom 05.03.2025 bis zum 17.04.2025 Barrieren-fasten. Sei dabei!
Tag 31 sticky header + scroll-margin-top
Inhaltsverzeichnis
Einleitung
Ein sticky header hat Vorteile: Wenn das Logo und die Navigation immer sichbar sind lässt sich – die Nutzung mit sehenden Augen, Maus- oder Finger-Navigation vorausgesetzt – immer schnell auf die Startseite und alle anderen Menüpunkte navigieren. Außerdem kann das Logo immer sichtbar bleiben, was nicht nur für die Orientierung der Nutzer:innen hilfreich ist, sondern auch den Wiedererkennungswert der Marke erhöht.
Leichte Sprache und sticky header
Gerade für Nutzer:innen, die auf Leichte Sprache angewiesen sind, ist der fest stehende Header oft eine große Erleichterung. Es kann also auch eine Überlegung sein, den Header nur in dem Fall zu fixieren, dass die Seitenprache <html lang='de-simple' gesetzt ist.
Das Problem mit sticky Headern und Anker-Links
Wenn eine Webseite mit einem sticky Header zusätzlich Anker-Links – zum Beispiel Skip-Links – enthält wird es spannend. Browser 'sehen' die sticky Header nicht. Entsprechend berechnen sie deren Höhe auch nicht wenn es darum geht zu einem Anker-Link zu springen. Dessen Inhalt wird dann zunächst überdeckt. Nutzer:innen müssen dies mitbekommen und hoch scrollen, um den gewünschten Inhalt von Anfang an zu sehen. Dadurch entsteht eine Barriere, die wir mit geringem Aufwand beseitigen können.
Damit Du dies testen kannst habe ich für diese Seite ein Inhaltsverzeichnis angelegt, den Header sticky gemacht und den Code in meinem CSS implementiert.
Scroll-Margin-Top
Inzwischen gibt es für fast alle gängigen Darstellungsprobleme eine CSS-Regel, die Abhilfe verspricht. In diesem Fall ist es Scroll-Margin-Top01.
Gerade mobil im Querformat ist der Platz in der Höhe sehr begrenzt. Darum sollte der Header hier nicht sticky gesetzt werden. Auch auf größeren Bildschirmen bereitet ein sticky header Probleme wenn das Browserfenster nicht hoch genug ist, oder die Schrift riesig groß. Darum lohnt es sich, den Header erst ab einer gewissen verfügbaren Höhe zu fixieren. Die Höhe sollte auf jeden Fall in rem angegeben werden, um in Bezug zur Schriftgröße zu stehen:
@media (min-height: 30rem) {
header{
position: sticky;
top: 0;
z-index: 50000;
min-height: 6rem;
}
*:target {
scroll-margin-top: 7rem;
}
}
Die genaue Höhe von dem Header und scroll-margin-top sind projektabhängig.