Estoy trabajando en un proyecto nextjs con Material UI. Debo crear una página con una barra de aplicaciones, esencialmente contenido ilimitado en el medio y un pie de página.
Estoy tratando de crear un pie de página parcialmente pegajoso, donde la parte superior es solo una pequeña barra naranja, que ya está implementada usando css
export default function Footer() { return ( <div style={{ position: "fixed", width: "100%", backgroundColor: Colors.orange6, bottom: "0", left: "0", height: 16, }} /> ); }Necesito crear una parte inferior del pie de página, que es parcialmente adhesiva. Solo será visible cuando se desplace hacia abajo.
¿Cuál sería una forma elegante de implementar esto?
intente verificar si está en la parte inferior de la página y ocultar y mostrar condicionalmente su pie de página.
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> ) };