Capture id of components that scrolls off screen

[hragbalian]

Hello,

I'm wondering if there's a straightforward way to capture the id of components that scrolls off screen? As a basic example, I've got a list of cards that I've populated with a foreach where each card has an id that is also the header for the card. When I scroll through the cards, I'd like to capture the id that scrolled out of the viewport so that I can display the header in a sticky area at the top of the screen.

[masenf]

Have you considered CSS for this; particularly position: sticky?

I've also published reflex-intersection-observer https://github.com/masenf/reflex-intersection-observer which lets you get an event callback when an element intersects or stops intersecting a particular element that might be able to help.

[hragbalian]

Oh ok great, I'll take a look at intersection observer, thanks!

The sticky solution won't work, I don't think, because I've already got a sticky section with other stuff that is occupying the space that component is scrolling into, so I want to nestle the out of screen text next to it, like so: