CSS: Position Sticky

Die CSS-Eigenschaft „position“ dürfte allen bekannt sein (static, fixed, relative und absolute). Relativ neu ist hier der Wert „sticky“.

Mit diesem kann eingestellt werden, dass ein Element so lange sichtbar bleibt, wie der Container, in dem es sich befindet, sichtbar ist. Ein praktischer Anwendungsfall ist z. B. eine Tabelle, bei der die Überschriftenzeile so lange sichtbar ist, wie durch die Daten gescrollt wird.

In meinem Beispiel habe ich einen Container, der den Header, den Content und den Footer enthält. Vor und nach dem Container gibt es noch weitere Inhalte, um das Ganze besser zu verdeutlichen.

Der Content benötigt mehr Platz, als im Fenster angezeigt wird. So lange dieser sichtbar ist, sind auch der Header und der Footer sichtbar. Das einzige, was gemacht werden muss, ist „position“ bei Header und Footer auf „sticky“ zu stellen und entweder „top“ oder „bottom“ anzugeben. In meinem Fall habe ich diese mit jeweils 0 angegeben, wodurch die Elemente jeweils am oberen oder unteren Rand kleben bleiben. Würde im Header der Wert bei „top“ auf 50px geändert, dann bleibt der Header bereits 50px vor dem oberen Rand kleben.

position: sticky;
top: 0;