Florence Maurice

Webthemen

Halb feststehende Bereiche mit position: sticky

Geschrieben am: , aktualisiert:

Heute sieht man häufiger folgendes Scrollverhalten: Oben gibt es einen fetten Header und darunter die Navigation. Beim Scrollen verschwindet der Header irgendwann, die Navigation bewegt sich beim Scrollen nach oben - und bleibt dort stehen. Sie verhält sich in dem Moment, wo sie oben anbekommen ist, wie ein mit position: fixed positioniertes Element. Zu Beginn jedoch, solange sie auch normal sichtbar ist, bewegt sie sich beim Scrollen normal mit.

position sticky Beispiel

Ein schicke Sache. Und eigentlich geht es ganz einfach. Man gibt dem Element, das dieses Verhalten haben soll, die Angabe position: sticky. Außerdem sollte man noch hinter top bestimmen, wo es sich befinden soll, wenn es feststeht. In unserem Beispiel soll es ganz oben sein:

position: sticky; 
top: 0px;

Diese Angaben genügen - dann funktioniert es beispielsweise im Firefox (ab Version 32) und im Chrome ab Version 56 sowie im Safari mit -webkit-, ab Version 13 auch ohne.

Beispiel mit position:sticky ausprobieren.