Erst scrollen, dann fixiert: position: sticky

CSS position:sticky – einen Block im Viewport fest positionieren

position: sticky läßt einen Block mit dem Inhalt scrollen bis er eine bestimmte Position erreicht, z.B. um ein Navigationsmenü am oberen Rand des Browserfensters einzuklinken, wenn es den oberen Rand des Viewports erreicht hat.

18-12-15 SITEMAP

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.

Wir stecken
gleich
fest
@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.

HEADER AHEADER BHEADER C
123
456
789
101112
131415
161718
192021
222324
252627
282930

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