Wie wird erstellt: Sticky-Elemente

Lernen Sie, wie Sie mit CSS Sticky-Elemente erstellen.

Probieren Sie es selbst aus

Hinweis:Dieser Beispiel ist nicht für Internet Explorer oder Edge 15 und frühere Versionen geeignet.

Sticky-Elemente

Beispiel

div.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

Probieren Sie es selbst aus

Elemente mit position: sticky; werden basierend auf der Scrollposition des Benutzers positioniert.

Sticky-Elemente wechseln zwischen relativer und fester Positionierung, abhängig von der Scrollposition. Bis zur angegebenen Verschiebungsposition im Viewport wird es relativ positioniert, dann 'klebt' es an Ort und Stelle (wie position:fixed).

Hinweis:Internet Explorer, Edge 15 und frühere Versionen unterstützen das sticky-Positionieren nicht. Safari erfordert den -webkit-Präfix (siehe Beispiel unten). Um das sticky-Positionieren wirksam zu machen, muss mindestens einer von top, right, bottom oder left angegeben werden.

Related pages

Tutorial:CSS positioning