Sticky Header: CSS position: sticky und Ausblenden beim Scrollen
Leitfaden für Sticky Header
Sticky Header CSS: position sticky, Verkleinern, Ausblenden | We.Inc
Baue einen Sticky Header mit position: sticky und ergänze dann Verkleinern und Ausblenden beim Scrollen. Live-Demo, Anker-Abstände mit scroll-margin, z-index-Fixes und ein kleiner React-Hook.
Gib dem Header position: sticky und top: 0, dazu einen Hintergrund und einen z-index, und er bleibt beim Scrollen der Seite fixiert. Er haftet nur innerhalb seines Elternelements, und ein Vorfahre mit gesetztem overflow kann ihn blockieren. Für einen Header, der beim Scrollen verschwindet, schaltest du per Scroll-Listener eine translateY-Klasse um.
sticky und fixed für Header im Vergleich
position: sticky
position: fixed
Nimmt Platz im Layout ein
Ja
Nein, füge dem body Padding hinzu
Fixiert relativ zu
Nächstem scrollenden Vorfahren
Dem Viewport
Braucht einen Inset wie top: 0
Ja, sonst verhält er sich wie relative
Meistens
Erzeugt einen Stacking Context
Ja
Ja
Endet am Ende seines Elternelements
Ja
Nein
Sticky Header sind eine Zeile CSS, bis sie es nicht mehr sind: Der Header bleibt nicht haften, Ankerlinks landen darunter oder ein Dropdown rutscht hinter den Inhalt. Diese Seite zeigt die eine CSS-Zeile und dann jeden dieser Fehler, mit einer Live-Scroll-Demo, in der du zwischen normalem, verkleinerndem und ausblendendem Modus wechseln kannst.
Scrolle in der Demo-Box. Der Header haftet an dieser Box, genau wie ein echter Header an der Seite haftet.
Stelle den Modus auf Verkleinern oder Ausblenden beim Scrollen und scrolle erneut in beide Richtungen.
Klicke in der Demo auf einen Abschnittslink, um zu sehen, wie scroll-margin-top die Überschrift vom Header freihält.
Kopiere das CSS und den Hook, die zu deinem gewünschten Modus passen.
Wenn sticky nichts bewirkt, suche nach einem Vorfahren mit overflow: hidden, auto oder scroll. Der Header haftet dann an dieser Box statt an der Seite.
Ein Sticky-Element kann sein Elternelement nicht verlassen. Setze den Header direkt in den body oder in einen Wrapper, der so hoch ist wie die Seite.
Gib dem Header einen deckenden oder leicht transparenten Hintergrund, sonst scheint der Inhalt beim Scrollen durch.
Setze scroll-padding-top auf html auf die Höhe des Headers, damit jeder Ankerlink und jedes fokussierte Element darunter stoppt.
Respektiere reduzierte Bewegung: Lass die Slide-Animation für Menschen weg, die weniger Bewegung eingestellt haben.
Häufige Fragen
Warum funktioniert mein position: sticky nicht?
Drei übliche Ursachen: kein Inset-Wert wie top: 0, ein Elternelement, das direkt nach dem Header endet, sodass kein Platz zum Haften bleibt, oder ein Vorfahre mit einem anderen overflow als visible, der dann zur Box wird, an der der Header haftet. Prüfe sie in dieser Reihenfolge.
Sollte ein Header sticky oder fixed sein?
Sticky ist einfacher, weil er seinen Platz im Layout behält, sodass oben auf der Seite nichts darunter springt. Fixed ist nützlich, wenn der Header über einem bildschirmfüllenden Hero liegen muss, aber dann fügst du der Seite selbst Padding hinzu.
Wie verhindere ich, dass Ankerlinks unter einem Sticky Header verschwinden?
Füge dem scrollenden Container, meist html, scroll-padding-top in Höhe des Headers hinzu. Für einzelne Ziele kannst du stattdessen scroll-margin-top direkt auf die Überschrift setzen.
Warum erscheint mein Dropdown hinter dem Seiteninhalt?
Sticky-Positionierung erzeugt einen Stacking Context, daher kann alles im Header nur innerhalb davon gestapelt werden. Hebe den Header selbst mit einem z-index über späteren Inhalt an, zum Beispiel z-index: 50, statt das Dropdown anzuheben.
Wie sticky wirklich funktioniert
Ein Sticky-Element beginnt im normalen Fluss. Sobald das Scrollen es über seinen Inset hinaustragen würde, bei einem Header top: 0, hält es diese Position, bis das Ende seines Elternelements kommt und es wegschiebt.
Die Box, an der es haftet, ist der nächste Vorfahre mit einem Scroll-Mechanismus, und dazu zählt auch overflow: hidden. Deshalb kann ein Wrapper, der hinzugefügt wurde, um ein Karussell abzuschneiden, unbemerkt einen weit entfernten Header kaputtmachen.
Beim Runterscrollen ausblenden, beim Hochscrollen zeigen
Vergleiche die aktuelle Scrollposition mit der letzten. Eine Bewegung nach unten über einen kleinen Schwellenwert blendet den Header mit transform: translateY(-100%) aus; jede Bewegung nach oben holt ihn zurück.
Animiere transform statt top oder height, denn ein transform löst kein Layout aus. Höre mit der Option passive auf scroll, damit der Browser nie auf deinen Handler warten muss.
Verkleinern ohne Layout-Sprünge
Wenn sich die Höhe des Headers ändert, während er haftet, verschiebt sich der Inhalt darunter. Halte die äußere Höhe fest und verkleinere das Logo mit transform: scale, oder reduziere das Padding in einem Header, der ohnehin schon aus dem Weg ist.
Ein data-Attribut wie data-scrolled auf dem Header hält die Stilregeln im CSS und das Skript bei einer einzigen Zeile.
Der einfache Sticky Header
Sticky Header in einer scrollenden Seite
Scrolle im Rahmen. Der Header bleibt oben, und der Ankerlink stoppt dank scroll-padding-top darunter.
Beim Runterscrollen ausblenden, beim Hochscrollen zeigen
CSS für den ausgeblendeten und den verkleinerten Zustand
Das Skript setzt nur data-Attribute. Jede visuelle Änderung steckt im CSS.
React-Hook: useHideOnScroll
Gibt zwei Booleans zurück, die du als data-Attribute auf den Header spreizen kannst. Der Schwellenwert von 8px ignoriert winziges Zittern.
Stolperfallen bei Sticky Headern
Symptome und Lösungen
Symptom
Ursache
Lösung
Header scrollt weg
Kein top-Wert
top: 0 hinzufügen
Header scrollt weg
Vorfahre hat overflow: hidden
overflow auf einen kleineren Wrapper verlegen oder overflow: clip nutzen
Haftet, verschwindet dann zu früh
Elternelement ist zu kurz
Header in den body oder einen Wrapper mit voller Höhe setzen
Anker-Überschriften verdeckt
Kein Scroll-Abstand
scroll-padding-top auf html
Menü liegt hinter dem Inhalt
Stacking Context des Headers zu niedrig
z-index auf dem Header selbst
Inhalt scheint durch
Transparenter Hintergrund
Dem Header eine Hintergrundfarbe geben
Einfach sticky
Verkleinern
Beim Scrollen ausblenden
Einleitung
Funktionen
Preise
Kontakt
Live-Scroll-Demo
Wechsle zwischen einfach, verkleinern und ausblenden beim Scrollen und scrolle dann in der Box.
Header-Modus
Scrollbare Demo-Seite
Marke
Scrolle nach unten und dann ein Stück zurück nach oben.