Gewusst wie: Klebriges Element
Erfahren Sie, wie Sie mit CSS ein Sticky-Element erstellen.
Hinweis: Dieses Beispiel funktioniert nicht in Internet Explorer oder Edge 15 und früheren Versionen.
Klebriges Element
Beispiel
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
Ein Element mit position: sticky;
wird basierend auf der Bildlaufposition des Benutzers positioniert.
Ein Sticky-Element wechselt zwischen relative
und fixed
, je nach Scroll-Position. Es wird relativ positioniert, bis eine bestimmte Versatzposition im Ansichtsfenster erreicht wird - dann "klebt" es an Ort und Stelle (wie position:fixed).
Hinweis: Internet Explorer, Edge 15 und frühere Versionen unterstützen keine Sticky-Positionierung. Safari erfordert ein -webkit- Präfix (siehe Beispiel unten). Sie müssen auch mindestens eines von , oder angeben top
, damit right
die Sticky-Positionierung funktioniert.bottom
left
Um mehr über die CSS-Positionierung zu erfahren, lesen Sie unser CSS-Positionierungs - Tutorial.