Javascript 交叉口观察者API滚动感知导航

我试图使用交叉点观察者创建类似于下面的网站链接的东西，整个目标是重新创建作为每个部分导航的粘性框，我的思考过程与导航栏有关，当活动部分出现时，它会改变，我的代码笔的链接附在一张图片上，上面也显示了我在主站点上努力实现的目标，我是从这个站点的链接中得到这个想法的， 代码笔： 站点链接：

Javascript

 const changeNav = (entries, observer) => {
      entries.forEach((entry) => {
        // verify the element is intersecting
        if (entry.isIntersecting && entry.intersectionRatio >= 0.55) {
          // remove old active class
          document.querySelector(".active").classList.remove("active");
          // get id of the intersecting section
          var id = entry.target.getAttribute("id");
          // find matching link & add appropriate class
          var newLink = document
            .querySelector(`[href="#${id}"]`)
            .classList.add("active");
        }
      });
    };
    
    // init the observer
    const options = {
      threshold: 0.55,
    };
    
    const observer = new IntersectionObserver(changeNav, options);
    
    // target the elements to be observed
    const sections = document.querySelectorAll("section");
    sections.forEach((section) => {
      observer.observe(section);
    });

---

你想修复一些错误吗？不，基本上我想创建作为每个框的固定框，我希望我可以添加一个图像来说明我想做什么，在我的codepen演示中，当一个部分进入视口时，我使用交叉点观察者来更改活动类，这也是我试图通过固定框实现的，当一个部分进入代码笔时，该部分id的框会发生变化，如果您查看页面的右下角，请注意您在站点上向下滚动此站点时的操作@lissettdm