0

I'm a developer intern, and at the moment I'm designing a few web pages for my company. The latest request has me puzzled, so any help would be much appreciated. Using next.js

We have a page, with content, and at the bottom, a button. The button is fixed, so it's always visible. We have another component, a simple footer with links in it. What I need to do is stick the footer below the button, but only when the page is fully scrolled down.

So: if the page is not fully scrolled down, only the button should be visible at the bottom. If it is fully scrolled down, the component with the footer should be visible below the button.

Any pointers/tutorials/links on how I could go about doing this?

Thank you!

EuphorieSolitaire
  • 1
  • 2
  • is this what you want ? => https://stackoverflow.com/questions/7402635/how-can-i-make-content-appear-beneath-a-fixed-div-element –  Aug 17 '21 at 16:15
  • You can use `position: fixed` and `bottom: 0` on the button for when the page is not scrolled down, then you can remove the class that has these stylings on the button when the scroll to the bottom is done. I used the pure js debouncer idea from here to apply it https://stackoverflow.com/a/33754031/6175024 Here is a codepen where I tried it, it might help you or someone else to come up with the fuller solution https://codepen.io/SoulSkrix/pen/PomvLJm – Joseph Bradshaw Aug 17 '21 at 16:23

0 Answers0