將 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>   <===
    ...