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.

<div class="sticky">
	<div>Wir stecken</div>
	<div>gleich</div>
	<div>fest</div>
</div>

@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. Gut zu sehen ist aber auch, dass sticky nur für das umfassende Element gibt. Hier sitzt das sticky-Element innerhalb eines HTML-section-blocks. Sobald über diesen section-Block hinaus gescrollt wird, verschwindet auch der sticky-Block.

Tabellenkopf mit sticky fixieren

Bis auf Safari haben alle Browser die sticky-Eigenschaft für den Tabellenkopf lange verweigert. Jetzt klappt es endlich bei Chrome, Firefox & sonstigen.

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.

.sticky-table {
	max-height: 150px;
	overflow-y: scroll;
	
	table {
		table-layout: auto;
		
		thead {
			position:sticky;
			top: 0;
		}
	}
}