Implementing Auto-Scroll Table of Contents in Webflow

Hello !

Je dois mettre en place un TOC en auto-scroll pour l'ensemble des articles d'un site.

La TOC est dans une sidebar, qui doit être entièrement visible à l'écran. Parfois, les articles sont longs, avec beaucoup de H2, d'où le besoin de paramétrer cet élément en auto-scroll. Lorsque l'utilisateur lit l'article, si un H2 devient "invisible", la TOC doit scroller automatiquement pour mettre à jour les H2 suivants.

J'y travaille, mais je manque clairement de compétences sur le sujet, donc je n'arrive pas à mes fins.

L'un de vous a déjà mis ça en place sur Webflow ? (ma TOC est créé via Finsweet Attributes)

Page avec un article "long" : https://preprod-mapension-be.webflow.io/assurance-vie/assurance-solde-restant-du

mon custom code du moment : (la première partie du script est en lien avec une section qui n'est pas visible pour l'instant)

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const collectionListWrapper = document.querySelector('.collection_list-wrappertab'); 
    const tableauHeading = document.querySelector('.tableau_heading_absolute'); 

    function checkPosition() {
      const rect = collectionListWrapper.getBoundingClientRect(); 
      if (rect.top <= 9 * 16) { // 6rem (1rem = 16px)
        tableauHeading.style.visibility = 'hidden'; 
      } else {
        tableauHeading.style.visibility = 'visible'; 
      }
    }

 window.addEventListener('scroll', checkPosition);
    checkPosition(); 
    }
    setTimeout(() => {
    function titleHandler(entries, observer) {
      for (entry of entries) {
        if (entry.isIntersecting) {
          let idName = entry.target.parentNode.id
          console.log(idName)
          let link = document.querySelectorAll(`.fs-toc_link-content a[href='#${idName}']`)[0]
          link.scrollIntoView({ behavior: "instant" })
        }
      }
    }

    let titles = document.querySelectorAll(".fs-toc_richtext.w-richtext h2")

    let titleObserver = new IntersectionObserver(titleHandler)
    titles.forEach((title) => {
      titleObserver.observe(title)
    })
    }, 1000);
  });
  
</script>