Vor vier Jahren hat Eric Bidelman einen ansprechenden Blogpost darüber veröffentlicht, in dem es darum geht, dass position: sticky in WebKit gelandet ist. Damals war es die Engine, die Chrome und viele andere Browser wie Safari nutzte. Ein Jahr später und sehr zur Verärgerung der Webentwickler haben wir position:sticky aus Chrome entfernt, weil „die aktuelle Implementierung nicht so konzipiert ist, dass sie sich gut in das vorhandene Scroll- und Compositing-System einbindet“.
Wir wollten es schon immer wieder in Chrome integrieren, da im Programmfehler beschrieben wurde: „Sobald wir unser Scroll- und Compositing-Haus in der richtigen Reihenfolge erstellt haben, sollten wir zu position:
sticky zurückkehren und die Funktion so implementieren, dass sie sich gut in den Rest der Engine einfügt.“ Der Metafehler zur Nachverfolgung der Implementierung wird seit 2013 bearbeitet.
Die gute Nachricht: Ab Chrome 56 (Beta, Dezember 2016, stabil ab Januar 2017) ist position: sticky jetzt wieder in Chrome verfügbar.
Was bedeutet position:sticky?
Es hat eine Weile gedauert, bis ich hier angekommen bin, warum finde ich das so spannend?
position:sticky ist ein CSS-Positionierungsattribut, mit dem Sie ein Element im Darstellungsbereich fixieren (d. h. es am oberen Bildschirmrand verankern) können, aber nur, wenn das übergeordnete Element im Darstellungsbereich sichtbar ist und sich innerhalb des Schwellenwerts befindet. Wenn es nicht an den Darstellungsbereich fixiert ist, verhält sich das Element wie position: relative. Das ist eine sehr schöne und einfache Ergänzung der Plattform, durch die JavaScript nicht mehr in einem onscroll-Event-Handler verwendet werden muss, nur um ein Element oben im Darstellungsbereich zu sperren.
So sieht das auf meinem Blog aus. So kann ich die Kopfzeile des aktuellen Abschnitts am oberen Bildschirmrand belassen, während ich meine sehr langen und umständlichen Artikel lese:
Wenn du diese Funktion implementieren möchtest, musst du das Attribut position für das Element, das hängen bleiben soll, den Wert sticky haben.
Außerdem können Sie den Offset an der Stelle hinzufügen, an der er hängen muss.
h3 {
/* Element will be 'fixed' when it ... */
position: sticky;
/* ... is 10px from the top of the viewport */
top: 10px;
}
Im vorherigen Beispiel wird das <h3>-Element so korrigiert, dass es 10 Pixel vom oberen Rand des Darstellungsbereichs entfernt ist. Um es direkt oben im Darstellungsbereich zu fixieren, setzen Sie das Attribut top auf top: 0px.
Diese Funktion wird ziemlich gut unterstützt. Es ist in Chrome, Firefox und Safari verfügbar. Weitere Informationen zu position:sticky: