I have a fixed button as I scroll down a component, however, a second button is to appear below it when I reach the bottom of the webpage.
I have a working component, but it is wonky when I hit the bottom of the scroll. A scroll animation once the bottom of the page is reached maybe?
My current working component (scroll down the div to see the second button appear):
const App = () => {
const scrollListener = React.useRef();
const [showSecondButton, setShowSecondButton] = React.useState(false);
const onScroll = () => {
if (scrollListener.current) {
const { scrollTop, scrollHeight, clientHeight } = scrollListener.current;
if (scrollTop + clientHeight >= scrollHeight * 0.85) {
if (!showSecondButton) {
setShowSecondButton(true);
}
} else {
if (showSecondButton) {
setShowSecondButton(false);
}
}
}
};
return (
<div>
<div className="main" onScroll={() => onScroll()} ref={scrollListener}>
<h1>My Page</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum Sed ut perspiciatis unde omnis iste natus
error sit voluptatem accusantium doloremque laudantium, totam rem
aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto
beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni
dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam
est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
sed quia non numquam eius modi tempora incidunt ut labore et dolore
magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis
nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut
aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit
qui in ea voluptate velit esse quam nihil molestiae consequatur, vel
illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</div>
<div
className="my-absolute-btn"
style={{ bottom: showSecondButton ? "40px" : "2px" }}
>
<div>
<button style={{ backgroundColor: "red" }}>My absolute button</button>
</div>
{showSecondButton ? (
<div>
<button style={{ backgroundColor: "blue", marginTop: "50px" }}>
Hidden second button
</button>
</div>
) : null}
</div>
</div>
);
};
ReactDOM.render(
<App />,
document.getElementById('app')
);
.main {
position: relative;
width: 300px;
height: 300px;
overflow-y: scroll;
border: 1px solid red;
}
.my-absolute-btn {
position: absolute;
/* bottom: 50px; */
right: 0;
left: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>
The main issue with my current solution is how my button just "jumps" at some point and the other comes out of nowhere. I would like that the second button "push" the first one up when I hit that certain point in the scroll.