Vor vier Jahren hat Eric Bidelman einen ziemlich tollen Blogpost darüber geschrieben, dass position: sticky in WebKit gelandet ist, der damals die Engine war, die Chrome (und viele andere Browser wie Safari) angetrieben hat. Ein Jahr später haben wir position:sticky aus Chrome entfernt, was Webentwicklern gar nicht gefiel, weil „die aktuelle Implementierung nicht so konzipiert ist, dass sie sich gut in das vorhandene Scroll- und Kompositionssystem einbinden lässt“.
Wir wollten diese Funktion schon immer wieder in Chrome einführen, wie im Fehler beschrieben: „Sobald wir das Scrollen und die Komposition im Griff haben, sollten wir zu position:
sticky zurückkehren und die Funktion so implementieren, dass sie gut in die restliche Engine integriert ist.“ An der Behebung des Meta-Fehlers, der die Implementierung betrifft, wird seit 2013 gearbeitet.
Die gute Nachricht ist: Ab Chrome 56 (aktuell Betaversion, seit Januar 2017 stabile Version) ist position: sticky wieder in Chrome verfügbar.
Was bedeutet „position:sticky“?
Es hat ein wenig gedauert, bis wir hier angekommen sind. Warum freue ich mich darüber?
position:sticky ist ein CSS-Positionierungsattribut, mit dem Sie ein Element im Darstellungsbereich fixieren (d. h. oben auf dem Bildschirm verankern) können, aber nur, wenn das übergeordnete Element im Darstellungsbereich sichtbar ist und sich innerhalb des Grenzwerts befindet. Wenn es nicht am Darstellungsbereich fixiert ist, verhält sich das Element so, als wäre es 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 oben im Viewport zu fixieren.
So sieht es in meinem Blog aus. So kann ich die Überschrift des aktuellen Abschnitts oben auf dem Bildschirm anzeigen lassen, während Sie meine ziemlich langen und mühsamen Artikel lesen :\
Wenn Sie diese Funktion implementieren möchten, geben Sie an, dass das Attribut position für das Element, das „feststecken“ soll, den Wert sticky haben soll.
Außerdem können Sie den Versatz hinzufügen, an dem es haften 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 Darstellungsbereichs fixiert. Wenn Sie es direkt oben im Viewport platzieren möchten, setzen Sie das top-Attribut auf top: 0px.
Die Unterstützung für diese Funktion ist ziemlich stark. Sie ist in Chrome, Firefox und Safari verfügbar. Weitere Informationen zu position:sticky: