Mike Solomon hat an einem schicken Scrollytelling-Post für Esquire gearbeitet und darüber gebloggt. Er enthält GIFs von jedem Schritt, um nicht nur position: sticky; zu verstehen, sondern auch negative Ränder, Wrapper-Divs, Hintergründe und sogar ein Quäntchen JavaScript-Messung zu nutzen, um alles richtig hinzubekommen.
Was er nicht hat, ist eine isolierte Demo des Effekts. Ich dachte mir, ich versuche, es zu reverse-engineeren.
Hier ist meine, die ich „Sticky Figcaption mit vorragender Figur“ nennen werde.
Diese Demo ist voller magischer Zahlen, um den Aus-Effekt zum „hinter sich verstecken“-Effekt zu machen. Wenn das nicht wichtig ist, ist diese Version viel übersichtlicher.
Wahrscheinlich nicht *ganz* so, wie Mike es hatte, aber ich habe keinen Einblick in die genauen Details, die er in dem Blog-Post verfolgte. Sein finales GIF ist
Hier ist ein kurzes Video, das ich aus dem Artikel selbst aufnehmen werde, falls dich das zu einem anderen Ansatz inspiriert
Huch! Ich habe tatsächlich mit Mike darüber gesprochen, und er sagt, dass die wichtigste Erkenntnis aus all dem (die komplett an mir vorbeigegangen ist – sorry Mike!) ist, dass „sticky nicht nur für den oberen Bildschirmrand ist.“ Beachten Sie im Endprodukt, wie das sticky-Element lange bevor es zum Element am oberen Bildschirmrand wird, sticky wird. Es ist eher die Mitte des Bildschirms. Dafür ist der top-Wert bei position: sticky; da, aber in dieser Demo, bei der es darum geht, dass es in ein Bild hinein und heraus gleitet, wird es knifflig.
Nach einigem Hin und Her mit dem Forken…