<script> /*Source: https://github.com/Krzysztof-Antosik/Two-direction-Sticky-Sidebar*/ // Verificar el ancho de pantalla al cargar y redimensionar function checkScreenWidth() { if (window.innerWidth <= 767) { // Si la pantalla es menor o igual a 676px, no ejecutar el código return; } const stickyElement = document.querySelector('.fb-sidebar__aside'); const startPosition = stickyElement.getBoundingClientRect().top; let endScroll = window.innerHeight - stickyElement.offsetHeight - 500; let currPos = window.scrollY; let screenHeight = window.innerHeight; let stickyElementHeight = stickyElement.offsetHeight; let topGap = 40; let bottomGap = 40; setTimeout(() => { if (stickyElement.hasAttribute('data-top-gap')) { const dataTopGap = stickyElement.getAttribute('data-top-gap'); topGap = dataTopGap === 'auto' ? startPosition : parseInt(dataTopGap); } if (stickyElement.hasAttribute('data-bottom-gap')) { bottomGap = parseInt(stickyElement.getAttribute('data-bottom-gap')); } }, 100); stickyElement.style.position = 'sticky'; stickyElement.style.top = `${topGap}px`; stickyElement.style.height = 'fit-content'; function positionStickySidebar() { endScroll = window.innerHeight - stickyElement.offsetHeight - bottomGap; const stickyElementTop = parseInt(stickyElement.style.top.replace('px', '')); if (stickyElementHeight + topGap + bottomGap > screenHeight) { if (window.scrollY < currPos) { if (stickyElementTop < topGap) { stickyElement.style.top = `${stickyElementTop + currPos - window.scrollY}px`; } else if (stickyElementTop >= topGap && stickyElementTop !== topGap) { stickyElement.style.top = `${topGap}px`; } } else { if (stickyElementTop > endScroll) { stickyElement.style.top = `${stickyElementTop + currPos - window.scrollY}px`; } else if (stickyElementTop < endScroll && stickyElementTop !== endScroll) { stickyElement.style.top = `${endScroll}px`; } } } else { stickyElement.style.top = `${topGap}px`; } currPos = window.scrollY; } function stickyElementToMe() { stickyElement.style.top = `${topGap}px`; } function updateSticky() { screenHeight = window.innerHeight; stickyElementHeight = stickyElement.offsetHeight; positionStickySidebar(); } setTimeout(() => { window.addEventListener('resize', () => { currPos = window.scrollY; updateSticky(); }); document.addEventListener('scroll', updateSticky, { capture: true, passive: true }); }, 1000); } // Verificar el ancho de pantalla al cargar y redimensionar window.addEventListener('load', checkScreenWidth); window.addEventListener('resize', checkScreenWidth); </script>