Change element's position via animation in ReactJS

Question

I am trying to change the position of my slip element via animation transition whenever a user scrolls to the bottom of the page. The problem that I'm having is that I don't know how to switch the positioning from flex to relative . The slip element needs to be positioned above the footer.

I've managed to achieve this with only switching classes but I don't like the jerking animation so I wanted to add some transition but now I don't know how to make it stick above the footer.

How do I make the slip element stick on top of the footer and not be fixed when a user scrolls to the bottom of the page? The goal is to achieve this with a smooth transition/animation.

Here is my stackblitz example of the problem.

Answer 1

This isn't really a ReactJS question, it's more of a question about HTML and CSS styling.

I would get the position of the footer: footer.offsetTop , and then I could get the user's scroll position: window.scrollY and the window height: window.innerHeight . Using all of these values, I would determine if the user has scrolled to the point where the footer is visible, and if so, make the slip element have an absolute position where the bottom is set to the footer.offsetTop

That should, in theory, work.

I actually found a stack overflow question just for determining if an element is scrolled into view: How to check if element is visible after scrolling? so that should help some.