CSS Sticky

position: sticky ist ein CSS-Positionierungsmodus, der das Verhalten von relative und fixed kombiniert. Das Element ist standardmäßig im normalen Dokumentenfluss positioniert, bleibt aber beim Erreichen einer definierten Grenze während des Scrollens fixiert, solange es sich im Elternelement befindet.

Einfaches Sticky-Header

Eine der häufigsten Anwendungen von Sticky-Positionierung ist die Fixierung einer Kopfzeile während des Scrollens. Dazu muss neben position: sticky auch ein top-Wert angegeben werden, der bestimmt, wie weit das Element vom oberen Rand entfernt bleibt.

In diesem Beispiel erstellen wir eine Sticky-Kopfzeile, die immer oben auf dem Bildschirm bleibt, während der Inhalt gescrollt wird.

Sticky-Sidebar

Sticky-Positionierung kann nicht nur für Kopfzeilen, sondern auch für Sidebars verwendet werden. So bleiben Navigations- oder Informationsblöcke stets im Sichtfeld des Benutzers, während der Hauptinhalt gescrollt wird.

In diesem Beispiel erstellen wir eine Sticky-Sidebar, die beim Scrollen neben dem Inhalt sichtbar bleibt.

Tipps zur Verwendung von Sticky

Sticky-Elemente sind nützlich für bessere Navigation und Benutzererfahrung, aber ihre korrekte Anwendung ist entscheidend.

• Gib einem Sticky-Element immer einen top-, left-, right- oder bottom-Wert, sonst funktioniert es nicht.
• Stelle sicher, dass das Elternelement ausreichend Höhe hat, sonst funktioniert das Sticky-Element nicht richtig.
• Verwende Sticky für Navigationsmenüs, Sidebars oder Kopfzeilen, aber übertreibe es nicht, da zu viele fixierte Elemente störend sein können.