Sticky Positionierung vereint Aspekte der relativen und festen Positionierung. Wenn ein Element sticky positioniert ist, verhält es sich zunächst wie ein relativ positioniertes Element, bis es einen bestimmten Schwellenwert auf der Seite erreicht. Ab diesem Punkt verhält es sich wie ein fest positioniertes Element.

position: sticky;

Betrachten wir die folgende Illustration. Das Element mit dem Textinhalt I am sticky verwendet die Sticky-Positionierung.

Befindet sich ein Element innerhalb eines Containers und bleibt der Container im Viewport, verhält sich das Element wie ein relativ positioniertes Element. Sobald jedoch ein Teil des übergeordneten Containers den Viewport verlässt, bleibt das Element an seiner Position fixiert, solange ein Teil des Containers noch sichtbar ist. Verlässt der gesamte Container den Viewport, wird die relative Positionierung wieder aktiviert und das Element verschwindet zusammen mit dem Container aus dem Sichtbereich.

Übung: Erstellen mehrerer Abschnitte mit Sticky-Titeln. So bleibt der Titel des aktuellen Abschnitts, den der Nutzer gerade liest, immer sichtbar und verschwindet beim Scrollen.

Hinweis

Es ist wichtig zu erwähnen, dass wir die Eigenschaft top oder bottom angeben müssen, damit der Browser versteht, wo ein Element angeheftet werden soll.