Manikantan Ganapathy

GRAPHIC DESIGNER | RETOUCHER | WEB DESIGNER

Fancy

The Transformational Experience Of Studying At London Open University

Design

The History Of London Bridge University

Creative

Brexit Uncertainty Whats Next For The Uk Economy

Blog

<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>