0

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.

Kyle
  • 3,121
  • 2
  • 24
  • 39
ZombieChowder
  • 1,085
  • 10
  • 33

1 Answers1

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.

Kyle
  • 3,121
  • 2
  • 24
  • 39
  • I've done the same thing where you just switch the ID of the element with the appropriate styling. However, the transition is not smooth at all and my goal is to have a smooth transition. I am sorry but your answer doesn't really provide a solution to my problem. – ZombieChowder Mar 04 '21 at 18:16
  • @ZombieChowder See my implementation https://stackblitz.com/edit/react-ts-vqvxsv?file=index.tsx – Kyle Mar 04 '21 at 18:18