Working on a project with React and CSS in JS using Emotion. I am facing an issue where I need a button to stick at the bottom of the viewport on mobile, until the user scrolls to the footer. Once they reach the footer, the button should then be fixed at the top of the footer.
This button is a reusable component that can be easily added wherever needed and controlled with media queries for show/hide functionality.
Initially, I tried using:
position: fixed;
bottom: 0;
This solution worked well until the footer came into view. I require the button to remain at the top of the footer when reached.
I also attempted:
position: sticky;
top: (some amount of px);
However, position sticky did not have the desired effect in this scenario. It seems to work fine on parent components like the header, but not on child components.
If anyone knows how to make position: sticky work within a child component or has any alternative approaches, please share them with me. We are also utilizing Material UI, so if there's a lesser-known feature within MUI that could solve this issue, that would also be helpful. Thank you!