Mit der Sticky-Positionierung in CSS kann ein Element “haften” bleiben, während der Benutzer scrollt und es wird dort einrasten, bis es aufgrund seines ursprünglichen Platzes im Seitenfluss außerhalb des Ansichtsfensters gescrollt wird. Es ist wie eine Mischung aus relativer und fester Positionierung.
So verwenden Sie Sticky-Positionierung in CSS:
1. Um ein Element klebrig zu machen, verwenden Sie die CSS-Eigenschaft “position” mit dem Wert “sticky”.
```CSS .element { position: sticky; } ``` 2. Dann müssen Sie an und/oder ab welchem Rand das Element haften bleibt, angeben. Hierfür verwenden Sie die CSS-Eigenschaften “top”, “right”, “bottom” oder “left” und setzen deren Werte auf die gewünschte Verschiebung. ```CSS .element { position: sticky; top: 0; } ``` In diesem Beispiel bleibt “.element” an der Oberkante des Ansichtsfensters kleben, sobald es erreicht ist.Beachten Sie, dass der klebrige Effekt nur innerhalb des Elternelements des klebrigen Elements wirkt. Das bedeutet, dass das klebrige Element nicht über den Rand seines Elternelements hinaus kleben bleibt.
Darüber hinaus wird die Sticky-Positionierung nicht von allen Browsern unterstützt, deshalb ist es wichtig, dies zu berücksichtigen, wenn man entscheidet, ob man sie verwenden will oder nicht.
Es ist zu beachten – Jedes Element, das klebrig (sticky) gesetzt wird, wird als relativ positioniert betrachtet, bis sein Anhaltspunkt (z.B. top: 0) erreicht wird. Anschließend wirkt es wie ein fest positioniertes Element.
