当内容滚动到视图中时，将活动类应用于列表项

如何解决当内容滚动到视图中时，将活动类应用于列表项

我正在使用此脚本 (https://codepen.io/bramus/pen/ExaEqMJ) 将活动类应用到页面的内容列表中一段时间。

我知道如果多个标题可见，当前形式的脚本会突出显示多个项目，但我想对其进行调整，以便它选择页面最高的项目。例如，视口中有三个标题可见 - 当前脚本将突出显示内容列表中的所有三个标题，但我希望它只突出显示标题 1，直到我滚动过去：

标题 1

内容

标题 2

内容

标题 3

内容

window.addEventListener('DOMContentLoaded',() => {

    const observer = new IntersectionObserver(entries => {
        entries.forEach(entry => {
            const id = entry.target.getAttribute('id');
            if (entry.intersectionRatio > 0) {
                document.querySelector(`nav li a[href="#${id}"]`).parentElement.classList.add('active');
            } else {
                document.querySelector(`nav li a[href="#${id}"]`).parentElement.classList.remove('active');
            }
        });
    });

    // Track all sections that have an `id` applied
    document.querySelectorAll('section[id]').forEach((section) => {
        observer.observe(section);
    });
    
});