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

Question

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

这是有效的 jQuery 代码:

jQuery LIVE DEMO

现在这是我的原始 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 DEMO

Answer 1

我通过按 index 进行绑定(bind)(由我自行决定)删除了按属性 id 的绑定(bind):

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

此外，我插入了一个内部 forEach()删除所有地方的 active 类，随后接收到 current 类的 active 类。

$(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>   <===
    ...