Super fast news.
News section display
<script>
/*Source: https://github.com/Krzysztof-Antosik/Two-direction-Sticky-Sidebar*/
function makeSticky(element) {
let topGap = 40;
let bottomGap = 40;
let isStickyEnabled = false;
let resizeTimer;
function enableSticky() {
if (window.innerWidth <= 767) {
if (isStickyEnabled) {
// Desactivar sticky si es necesario
isStickyEnabled = false;
element.style.position = '';
element.style.top = '';
element.style.height = '';
}
return;
}
// Activar sticky si es necesario
isStickyEnabled = true;
element.style.position = 'sticky';
element.style.top = `${topGap}px`;
element.style.height = 'fit-content';
updateSticky();
}
function updateSticky() {
const startPosition = element.getBoundingClientRect().top;
let endScroll = window.innerHeight - element.offsetHeight - bottomGap;
let currPos = window.scrollY;
let screenHeight = window.innerHeight;
let elementHeight = element.offsetHeight;
if (element.hasAttribute('data-top-gap')) {
const dataTopGap = element.getAttribute('data-top-gap');
topGap = dataTopGap === 'auto' ? startPosition : parseInt(dataTopGap);
}
if (element.hasAttribute('data-bottom-gap')) {
bottomGap = parseInt(element.getAttribute('data-bottom-gap'));
}
function positionStickyElement() {
endScroll = window.innerHeight - element.offsetHeight - bottomGap;
const elementTop = parseInt(element.style.top.replace('px', ''));
if (elementHeight + topGap + bottomGap > screenHeight) {
if (window.scrollY < currPos) {
if (elementTop < topGap) {
element.style.top = `${elementTop + currPos - window.scrollY}px`;
} else if (elementTop >= topGap && elementTop !== topGap) {
element.style.top = `${topGap}px`;
}
} else {
if (elementTop > endScroll) {
element.style.top = `${elementTop + currPos - window.scrollY}px`;
} else if (elementTop < endScroll && elementTop !== endScroll) {
element.style.top = `${endScroll}px`;
}
}
} else {
element.style.top = `${topGap}px`;
}
currPos = window.scrollY;
}
function resetSticky() {
element.style.top = `${topGap}px`;
}
function handleResize() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(() => {
enableSticky();
if (isStickyEnabled) {
screenHeight = window.innerHeight;
elementHeight = element.offsetHeight;
positionStickyElement();
}
}, 500); // ajusta el tiempo de espera según tus necesidades
}
window.addEventListener('resize', handleResize);
document.addEventListener('scroll', positionStickyElement, {
capture: true,
passive: true
});
}
enableSticky();
}
window.addEventListener('load', () => {
const stickyElements = document.querySelectorAll('.fb-secside__sidebar');
stickyElements.forEach((element) => makeSticky(element));
});
</script>
