Erst scrollen, dann festsetzen: position sticky

position: sticky

Mit position: sticky läuft eine Seitenleiste oder das Navigationsmenü beim Scrollen mit nach oben, bis sie an den Rand des Browerfensters stoßen. Hier bleibt das sticky-Element stehen, auch wenn der Benutzer weiterscrollt.

Diese Technik kennen wir bereits aus vielen Webdesigns, aber das Verhalten musste mit CSS2 noch mit Javascript programmiert werden. position: sticky trat mit CSS3 auf den Plan und verlagert das Verhaltensmuster ins reine CSS. In IE11 ist position: sticky nicht angekommen.

@media (min-width: 720px) {
	nav.top {
		position: sticky;
		top: 0;
	}
	nav .topmenu {
		display: flex; 
		justify-content:space-between; 
		flex-wrap: wrap;
	}
}

setzt die obere Navigationsleiste – das Topmenü – fest, sobald das Menü an die obere Kante des Browserfensters stößt.

position: sticky war in Chrome zwischenzeitlich in Ungnade gefallen und wurde erst mit Version 56 wieder gnädig aufgenommen. Alle moderenen Browser (nicht IE11) unterstützen position: sticky. Microsoft Edge hat position: sticky in den letzten Versionen ebenfalls aufgenommen.

Das leidige sticky für Tabellen

Bis auf Safari verweigern alle Browser die sticky-Eigenschaft bei Tabellen.

Innerhalb der Tabelle scrollen – der Tabellenkopf bleibt fixiert

Damit der Sticky Header von Tabellen auch in Chrome, Firefox und Edge funktioniert, muss der umfassende Container mit overflow: auto versehen sein. Der sticky header braucht zudem top:0.

div.sticky-table {
    height: 200px;  
    overflow: auto;
}

div.sticky-table table {
    width: 100%;
    table-layout: fixed;
}

div.sticky-table thead {
    position: sticky;    
    top: 0;
}