Erst scrollen, dann fixiert: 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; 
       -ms-flex-pack: justify;
       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 unterstützen heute position: sticky bis auf IE11. Microsoft Edge hat position: sticky in den letzten Versionen ebenfalls aufgenommen, IE11 bleibt (wie nicht anders zu erwarten) bis an sein Ende außen vor.

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;
}