Das Prinzip
Manche Dinge sollen im Blick bleiben, während der übrige Inhalt weiterzieht: eine Abschnitts-Navigation, ein Kennwert, eine Bildunterschrift zu einer langen Erklärung. Genau das leistet position: sticky. Das Element scrollt zunächst normal mit — bis es einen festgelegten Rand erreicht. Ab dort bleibt es stehen, bis sein Bereich endet.
Die Demo oben zeigt es: Das linke Panel heftet sich oben an, während die Abschnitte daran vorbeiziehen. Scrolle im Feld, und es bleibt stehen.
Ohne JavaScript
Das Bemerkenswerte ist, wie wenig dazugehört. Das Anheften erledigt das Layout selbst — kein Scroll-Listener, keine Berechnung von Positionen, nichts, was ins Stocken geraten könnte. Der Browser hält das Element genau dann fest, wenn es nötig ist, und gibt es am Ende des Bereichs wieder frei.
Ein kleiner scroll-gekoppelter Zusatz kann sinnvoll sein — in der Demo hebt das Panel den aktuellen Abschnitt hervor. Das ist dann bewusst dezent: eine Markierung, die dem Lesen ruhig folgt, keine, die springt.
Worauf es ankommt
- Klarer Anfang und klares Ende. Der Steh-Bereich braucht Grenzen, sonst klebt das Element ewig oder löst sich zu früh. Meist ist es der umgebende Abschnitt, der den Rahmen setzt.
- Genug Platz. Ein angeheftetes Panel darf den Inhalt nicht verdecken. Auf schmalen Schirmen wandert es deshalb besser nach oben und wird zur schlanken Leiste, statt eine Spalte zu belegen.
- Führen, nicht ablenken. Was stehen bleibt, sollte Orientierung geben. Ein Element, das nur klebt, weil es kann, stört mehr, als es hilft.
Wann einsetzen
Für Navigation innerhalb langer Inhalte, für mitlaufende Werte, für Kontext, der zu einer Erklärung gehört. Sparsam gesetzt wirkt es souverän — und weil position: sticky kein Bewegungseffekt ist, funktioniert es auch dort unverändert, wo Bewegung reduziert werden soll.