Así que tengo dos componentes, un feed y una barra lateral. La barra lateral tiene más contenido del que puede mostrar, por lo que se permite que se desborde. Quiero que la barra lateral se desplace junto con el contenido, pero que se mantenga cuando llegue al final, sin embargo, el contenido puede seguir desplazándose.
El concepto es similar a la barra lateral + tipo de contenido de Twitter.
Encontré una solución en jQuery, pero realmente no puedo entender cómo escribir lo mismo en Nextjs, que es lo que estoy usando.
Aquí está la solución de violín de ejemplo que encontré, ¿alguien puede ayudarme a escribirla en react/next js?
How do i solve this ??¡Descubrí la solución yo mismo, lo escribí de una manera amigable para reaccionar para que las personas no tuvieran que romperse la cabeza!
Aquí tienes:
function handleScroll() { if(window.innerHeight <1000) { if(bottomVisible()) { document.getElementById('side').style.marginTop = ` ${ window.scrollY - sidebarRef.current.offsetHeight + window.innerHeight}px` } else if(topVisible()) { // document.getElementById('side').style.marginTop = `${window.scrollY}px`; } else { document.getElementById('side').style.marginTop = `${window.scrollY}px`; } } else { document.getElementById('side').style.position = 'sticky'; document.getElementById('side').style.top = '0px' } } useEffect(() => { window.addEventListener('scroll',handleScroll); return () => { window.removeEventListener('scroll', handleScroll); } },[]) function bottomVisible(){ var rect = sidebarRef.current.getBoundingClientRect(); if(rect.bottom <= window.innerHeight) { return true } return false } function topVisible() { var rect = sidebarRef.current.getBoundingClientRect(); if(rect.top <= 0) { return true } return false; }Descargo de responsabilidad: SidebarRef es una referencia que creé para el componente, y su altura es de 1000 px, por lo tanto, if-else