button collapsing with footer
I have a scroll to top button in my React web app.
I want to position it further from the bottom whenever it reaches the footer. So it wont be collapsing with footer and block the links in mobile view. Can you help me how can i achieve this
3 Replies
You can have use something like intersection observer to check how far down the page you've scrolled and adjust the styling accordingly.
https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver
also, consider using a negative margin top for the intersection detection, and transition the bottom position, so it doesnt look super janky
I have some code examples I made for someone else:
- simple https://codepen.io/z-/pen/yLRzvxK/7e70596d218432d4273650c514aec8c9
- full https://codepen.io/z-/pen/yLRzvxK/7e70596d218432d4273650c514aec8c9
- Working example https://codepen.io/z-/pen/WNaJoBV/68b42cd4267d11f2826bbf87562ccb4e