How to find when bottom of my div is intersecting with the bottom of my viewport?

[Steffi3rd]

Hello guys,

I have an use case when I need to stick a div id="toto" at the bottom of the screen when #toto is intersecting the bottom of the screen.

In fact, I would like to stick #toto until his bottom is intersecting the bottom of his parent container.

I tried useInView() but it seems it's intersecting to the top of the screen, not bottom.

Is anyone have an idea please?

[thebuilder]

Can you make a CodeSandbox example? It's a bit hard to grog what you are attempting. 🙂 Sounds like it's something you might be able to solve with position: sticky?

[Steffi3rd]

Indeed, it should be solve with position: sticky but it doesn't work with bottom: 0.
So I tried to find a way using react-intersection-observer

Here is my sandbox with position: sticky + top: 0 :
It was the original use case which worked but the new behavior is to sticky the left side once his bottom is intersecting the bottom on the screen

https://codepen.io/Steffi3rd/pen/PopoLXW

[Steffi3rd]

I think I find a way to solve that.

I use position: sticky + top: calc(height of the screen - height of the content).

So the result looks like the content is sticky when bottom of the content is intersecting the bottom on the screen