Eine Sticky Nav ist eine Navigation, die beim Scrollen am oberen Bildschirmrand stehen bleibt, statt mit dem Inhalt nach oben zu verschwinden. Sie hält die Hauptwege der Website dauerhaft erreichbar, unabhängig davon, wie weit jemand gelesen hat.
- Sticky Nav
Navigationsleiste, die beim Scrollen an ihrer Position am Bildschirmrand haften bleibt und dadurch immer sichtbar ist.
Beispiel: „Die Sticky Nav schrumpft nach dem ersten Scrollen auf halbe Höhe.“Auch: fixierte Navigation oder Sticky Navigation. Gemeint ist in allen Fällen dasselbe Verhalten.
Technisch: umgesetzt über
position: stickyoderposition: fixedin CSS. Die erste Variante haftet erst, wenn das Element beim Scrollen seinen Platz erreicht.
Wofür sie gut ist
Auf langen Seiten spart sie den Weg zurück nach oben. Wer auf einer Leistungsseite unten angekommen ist und zum Kontakt möchte, findet den Weg sofort statt nach mehreren Wischbewegungen. Auf Seiten mit einem klaren Ziel wandert deshalb oft auch der wichtigste Button mit, etwa „Termin vereinbaren“ oder „In den Warenkorb“.
In Shops ist der Warenkorb der häufigste Fall. Er zeigt nebenbei den aktuellen Stand an und ist aus jeder Position erreichbar, ohne dass der Einkauf unterbrochen wird.
Was sie kostet
Eine fixierte Leiste nimmt dauerhaft Platz weg. Auf einem Telefon im Querformat bleiben von 400 Pixeln Höhe schnell nur 320 übrig, wenn oben eine Navigation von 80 Pixeln steht. Deshalb verkleinern sich viele Sticky Navs nach dem ersten Scrollen oder blenden sich aus, solange nach unten gelesen wird, und kehren zurück, sobald jemand nach oben wischt.
Der zweite Punkt betrifft Sprungmarken. Ein Link auf einen Abschnitt scrollt diesen an den oberen Rand, wo die fixierte Leiste ihn verdeckt. Abhilfe schafft die CSS-Eigenschaft scroll-margin-top am Ziel, in der Höhe der Navigation.
Worauf zu achten ist
Barrierefrei bleibt eine Sticky Nav nur, wenn sie sich bei vergrößerter Schrift nicht über den halben Bildschirm legt. Die einschlägige Prüfregel verlangt, dass Inhalte bei 200 Prozent Zoom nutzbar bleiben, und eine mitwachsende fixierte Leiste ist der häufigste Grund, warum das misslingt. Wir setzen deshalb eine feste Maximalhöhe und lösen die Fixierung auf kleinen Höhen ganz auf.