js tab跟随滑动切换tab

js:

  let anchors = document.querySelectorAll("div[data-anchor-index]");

  let observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        let seq = Number(entry.target.getAttribute("data-anchor-index"));
        if (isNaN(seq)) return;
        setChosen(seq);
        // console.log("目标元素在视口中!", seq);
      }
    });
  });
  anchors.forEach((ele) => {
    observer?.observe(ele);
  });

  function setChosen(index) {
    list.each(function (a, b) {
      $($(".header > ul > li")[a]).removeClass("chosen");
    });
    $($(".header > ul > li")[index]).addClass("chosen");
  }

html:

<div data-anchor-index="0"></div>