Dynamic table of contents with Intersection Observer

part-article.html

<script type="text/javascript">

// Intersection Observer Options
var myObserverOptions = {
    root: null,
    rootMargin: "0px",
    threshold: [1],
};

// Each Intersection Observer runs setCurrent
var observeHtags = new IntersectionObserver(setCurrent, myObserverOptions);

// Add IO to all headings
function addIntersectionObserver() {
    var allHtags = document.querySelectorAll(".article-entry > h1, .article-entry > h2, .article-entry > h3");
    allHtags.forEach(tag => {
        observeHtags.observe(tag);
    });
}

// runs when the Intersection Observer is sent
function setCurrent(e) {
    e.map(i => {
        if (i.isIntersecting === true) {
            document.querySelector(`a[href="#${i.target.id}"]`).classList.add("active");
        } else {
            document.querySelector(`a[href="#${i.target.id}"]`).classList.remove("active");
        }
    })
}

(function setUp() {
    addIntersectionObserver();
    document.getElementsByClassName('article-toc')[0].style.display = '';
})();
  
</script>

Documented at https://johnmu.com/dynamic-toc-io/