Vor vier Jahren hat Eric Bidelman einen ziemlich tollen Blogbeitrag darüber geschrieben, dass position: sticky in WebKit eingeführt wurde. WebKit war damals die Engine, die Chrome (und viele andere Browser, darunter Safari) unterstützt hat. Ein Jahr später haben wir position:sticky aus Chrome entfernt, was bei Webentwicklern für viel Bestürzung sorgte, da „die aktuelle Implementierung nicht so konzipiert ist, dass sie sich gut in das bestehende Scroll- und Compositing-System einfügt“.
Wir wollten die Funktion immer wieder in Chrome einbauen, wie im Fehlerbericht angegeben: „Sobald wir das Scrollen und Compositing im Griff 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 Meta-Fehler, der die Implementierung verfolgt, wird seit 2013 bearbeitet.
Ab Chrome 56 (derzeit Beta-Version, Stand Dezember 2016, stabile Version ab Januar 2017) ist position: sticky wieder in Chrome verfügbar.
Was ist „position:sticky“?
Es hat eine Weile gedauert, bis wir so weit waren. Warum bin ich also so begeistert?
position:sticky ist ein CSS-Attribut für die Positionierung, mit dem Sie ein Element im Darstellungsbereich fixieren können, d. h. es oben auf dem Bildschirm verankern. Das ist jedoch nur möglich, wenn das übergeordnete Element im Darstellungsbereich sichtbar ist und sich innerhalb des Grenzwerts befindet. Wenn es nicht am Viewport fixiert ist, verhält sich das Element wie position: relative. Es ist eine sehr schöne und einfache Ergänzung der Plattform, die es überflüssig macht, JavaScript in einem onscroll-Ereignishandler zu verwenden, nur um ein Element am oberen Rand des Viewports zu fixieren.
Hier sehen Sie, wie das auf meinem Blog aussieht. So kann ich den Header des aktuellen Abschnitts oben auf dem Bildschirm behalten, während Sie meine ziemlich langen und mühsamen Artikel lesen :)
Um diese Funktion zu implementieren, geben Sie an, dass das Attribut position den Wert sticky für das Element haben soll, das fixiert werden soll.
Außerdem können Sie den Offset hinzufügen, an dem das Video hängen bleiben soll.
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 10 Pixel vom oberen Rand des Viewports entfernt positioniert. Wenn Sie das Element direkt oben im Viewport fixieren möchten, legen Sie das Attribut top auf top: 0px fest.
Die Unterstützung für diese Funktion ist sehr gut. Sie ist für Chrome (yay), Firefox und Safari verfügbar. Weitere Informationen zu position:sticky: