Halb feststehende Bereiche mit position: sticky

Heute sieht man häufiger folgendes Scrollverhalten: Oben gibt es einen fetten Header und darunter die Navigation. Beim Scrollen verschwindet der Header irgendwann, die Navigation bewegt sich beim Scrollen nach oben – und bleibt dort stehen. Sie verhält sich in dem Moment, wo sie oben anbekommen ist, wie ein mit position: fixed positioniertes Element. Zu Beginn jedoch, solange sie auch normal sichtbar ist, bewegt sie sich beim Scrollen normal mit.

position sticky Beispiel

Ein schicke Sache. Und eigentlich geht es ganz einfach. Man gibt dem Element, das dieses Verhalten haben soll, die Angabe position: sticky. Außerdem sollte man noch hinter top bestimmen, wo es sich befinden soll, wenn es feststeht. In unserem Beispiel soll es ganz oben sein:

position: sticky;
top: 0px;

Diese Angaben genügen – dann funktioniere es beispielsweise schon im Firefox (ab Version 32).

Beispiel mit position:sticky ausprobieren.

Polyfill für andere Browser

Im Firefox funktioniert position: sticky  seit Version 32, für andere Browser gibt es mehrere Polyfills, um position: sticky nachzubilden. Ausgetestet habe ich das Skript der filamentgroup. Wenn man die Dateien unter https://github.com/filamentgroup/fixed-sticky heruntergeladen hat, geht die Verwendung folgendermaßen:

Im Kopfbereich muss die CSS-Datei eingebunden werden:

<link rel="stylesheet" href="fixedsticky.css" />

Das Element, das das position: fixed-Verhalten zeigen soll, benötigt die Klasse fixedsticky, im Beispiel ist es das Hauptmenü:

<nav class="fixedsticky">

Das Plug-in setzt auf jQuery, deswegen muss man zuerst jQuery und dann das Plug-in einbinden:

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="fixedsticky.js"></script>

Schließlich fehlt noch die Aktivierung des Plugins. Wenn man diesen Code am Ende des Dokuments schreibt spart man sich $(function():

<script>
$(".fixedsticky").fixedsticky();
</script>

Noch eine letzte Kleinigkeit ist notwendig. Das Plug-in macht eigentlich Folgendes: Es ergänzt beim mit der Klasse versehenen Element, in dem Moment, wo dieses sich oben befindet, die CSS-Angabe position: fixed. Elemente, bei denen man position: fixed definiert, benötigen eine Breite, da sie sonst so klein wie nur möglich werden („shrink to fit“). In unserem Beispiel habe ich deswegen zusätzlich die Navigation auf eine Breite von 100% gesetzt.

.fixedsticky {
position: sticky;
top: 0px;
width: 100%;
}

Beispiel fixed-sticky mit Polyfill ausprobieren (externe Datei).

 

2 Kommentare zu “Halb feststehende Bereiche mit position: sticky”

  1. Sophie

    Hi! 🙂

    leider funktioniert der Code nicht in Chrome!

    Antworten
  2. Florence

    Hi Sophie,
    position: sticky funktioniert pur erst in Chrome ab 56 (aktuelli im Nov 16 ist Version 54).
    Deswegen braucht man ein Polyfill – das ist das zweite Beispiel – und dann gehts auch im Chrome (gerade noch mal getestet).
    Viele Grüße
    Florence

    Antworten

Kommentare? Gerne :-)

HTML: Folgender HTML-Code kann verwendet werden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>