I am working on a nextjs project with Material UI. I am to create a page with an app bar, essentially unlimited contents in the middle, and a footer.
I am trying to create a partially sticky footer, where the Top part is just a small orange bar, which is already implemented using css
export default function Footer() {
return ( <div style={{ position: "fixed", width: "100%", backgroundColor: Colors.orange6, bottom: "0", left: "0", height: 16, }} /> );
}
I need to create a bottom part of the footer, which is partially sticky. It will only be visible when scrolled to the bottom.
What would be an elegant way to implement this?
try checking if you are at the bottom of the page and conditionally hide and show your footer.
const App = () => {
const [isBottom, setIsBottom] = React.useState(false);
const handleScroll = () => {
const bottom = Math.ceil(window.innerHeight + window.scrollY) >= document.documentElement.scrollHeight
if (bottom) {
setIsBottom(true)
} else {
setIsBottom(false)
}
};
React.useEffect(() => {
window.addEventListener('scroll', handleScroll, {
passive: true
});
return () => {
window.removeEventListener('scroll', handleScroll);
};
}, []);
return (
<div>content.....</div>
<footer className={isBottom ? "showFooter" : "hideFooter"}>M</footer>
)
};