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

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

以下是工作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演示：

---

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

此外，我还插入了一个内部的

forEach（）

，以在所有地方删除活动类，随后收到当前的活动类

$（window.scrollTop（）

替换为

window.pageYOffset

$（this）.offset（）.top

替换为

项.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中，一些封面

不包含

/

，就像封闭的

一样。就像这样：

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

目标1
项目1
第1项你看过控制台了吗？控制台是你的朋友。JSFIDLE甚至为您提供了一个控制台。看看控制台。它会帮助你，因为它是你的朋友。你试过我的解决方案了吗？谢谢。谢谢你的帮助，伙计@progx，没问题：）
<section id="main">
    <div class="target" id="1">TARGET 1</div>
    <div>item 1</div>
    <div>item 1<div>   <===
    <div>item 1<div>   <===
    ...