将 jQuery 转换为 Vanilla javaScript 时出现滚动问题

Question

我正在将这个简单的滚动代码从 jQuery 转换为 vanilla Javascript，但在选择元素时有一些小问题。 谁能指出我正确的方向？ 提前非常感谢！

这是工作 jQuery 代码：

jQuery 现场演示

现在这是我的香草 Javascript 代码：

window.addEventListener('scroll', function() {
  document.querySelectorAll('.target').forEach(function(item, index){
      if($(window).scrollTop() >= $(this).offset().top) {
         var id = $(this).attr('id');
         document.querySelector('#nav nav a').classList.remove('active');
         document.querySelector('#nav nav a[href=#'+ id +']').classList.add('active');
     }
 });
});

香草 JavaScript 演示：

JavaScript 演示

Answer 1

我通过按索引进行绑定（由我自行决定）删除了按属性id的绑定：

document.querySelectorAll("#nav nav a")[index].classList.add("active");

此外，我插入了一个内部forEach()以删除所有的活动class，随后收到当前的活动class。

$(window).scrollTop()替换为window.pageYOffset ；

$(this).offset().top替换为item.offsetTop 。

window.addEventListener("scroll", function () {
    document.querySelectorAll(".target").forEach(function (item, index) {
        if (window.pageYOffset >= item.offsetTop) {
            document.querySelectorAll("#nav nav a").forEach(function (a_del) {
                a_del.classList.remove("active");
            });
            document.querySelectorAll("#nav nav a")[index].classList.add("active");
        }
    });
});

此外，在您的 html 中，一些覆盖<div>不包含/ ，例如封闭的</div> 。 像那样：

<section id="main">
    <div class="target" id="1">TARGET 1</div>
    <div>item 1</div>
    <div>item 1<div>   <===
    <div>item 1<div>   <===
    ...