Wie man erkennt, wenn ein „sticky“ Element angeheftet wird

Avatar of Chris Coyier
Chris Coyier am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Ich stimme David vollkommen zu, dass CSS einen Selektor benötigt, um zu wissen, ob ein position: sticky;-Element seine Sticky-Funktion ausführt oder nicht.

Idealerweise gäbe es eine `:stuck`-CSS-Direktive, die wir verwenden könnten, aber stattdessen ist das Beste, was wir tun können, eine CSS-Klasse anzuwenden, wenn das Element mit einem CSS-Trick und etwas JavaScript-Magie „sticky“ wird.

Ich liebe es, wenn es eine Lösung gibt, die kein massiver Polyfill oder so etwas ist. In diesem Fall sind es ein paar Zeilen `IntersectionObserver`-JavaScript und eine knifflige Verwendung von `top: -1px` in CSS.

Direkter Link →