Javascript 当浏览器窗口向下或向上时，如何在nav中删除或添加类

我有四个元素的导航。我尝试在用户打开的元素中添加类（例如css中带有下划线）。但当用户向上或向下滚动时，我希望删除该类并根据用户停留的位置在nav中添加不同的元素。 这是我的密码：

    let currentPosition = window.scrollY;
    let basicFunctionPosition = document.querySelector("#basic-function").offsetTop;
    let moreFunctionsPosition = document.querySelector("#more-functions").offsetTop;
    let signUpPosition = document.querySelector("#sign-up").offsetTop;
    let teamPosition = document.querySelector('#team').offsetTop;
    let dataSectionInNav = "";
    let dataSectionInNavTeam = "";

    if (currentPosition > basicFunctionPosition && currentPosition < moreFunctionsPosition) {
        dataSectionInNav = document.querySelector(".data-section-basic-func");
        dataSectionInNav.classList.add("sectionPositionInNav");

    } else if (currentPosition > moreFunctionsPosition && currentPosition < signUpPosition) {
        dataSectionInNav = document.querySelector(".data-section-more-func");
        dataSectionInNav.classList.add("sectionPositionInNav");

    } else if (currentPosition > signUpPosition && currentPosition < teamPosition) {
        dataSectionInNav = document.querySelector(".data-section-sign-up");
        dataSectionInNav.classList.add("sectionPositionInNav");
        dataSectionInNavTeam = document.querySelector(".data-section-team");
        dataSectionInNavTeam.classList.add("sectionPositionInNav");
    }
});

让currentPosition=window.scrollY；
让basicFunctionPosition=document.querySelector（“#basic function”）.offsetop；
让moreFunctionsPosition=document.querySelector（“更多函数”）.offsetTop；
让signUpPosition=document.querySelector（“注册”）.offsetop；
让teamPosition=document.querySelector（“#team”）.offsetTop；
让数据集显示INNAV=“”；
让数据集名为navteam=“”；
if（currentPosition>basicFunctionPosition&¤tPositionmoreFunctionsPosition&¤tPositionsignUpPosition&¤tPosition

当用户滚动时，您需要循环使用您的条件：

// Reference: http://www.html5rocks.com/en/tutorials/speed/animations/

let last_known_scroll_position = 0;
let ticking = false;

function doSomething(scroll_pos) {
  // Do something with the scroll position
}

window.addEventListener('scroll', function(e) {
  last_known_scroll_position = window.scrollY;

  if (!ticking) {
    window.requestAnimationFrame(function() {
      doSomething(last_known_scroll_position);
      ticking = false;
    });

    ticking = true;
  }
});

上面的示例使用requestAnimationFrame来降低函数的运行速度

---

查看以了解更多信息。

之后，我使用此代码

document.addEventListener("scroll", function () {
    let currentPosition = window.scrollY;
    let basicFunctionPosition = document.querySelector("#basic-function").offsetTop;
    let moreFunctionsPosition = document.querySelector("#more-functions").offsetTop;
    let signUpPosition = document.querySelector("#sign-up").offsetTop;
    let teamPosition = document.querySelector("#team").offsetTop;
    let addClass = "";
    let delateClass = "";

    if (currentPosition < basicFunctionPosition) {
        delateClass = document.querySelectorAll(".data-section-basic-func, .data-section-more-func, .data-section-sign-up, .data-section-team");
        delateClass.forEach((item) => {
            item.classList.remove("highlightNav");
        });
    } else if (currentPosition > basicFunctionPosition && currentPosition < moreFunctionsPosition) {
        delateClass = document.querySelectorAll(".data-section-more-func, .data-section-sign-up, .data-section-team");
        delateClass.forEach((item) => {
            item.classList.remove("highlightNav");
        });
        addClass = document.querySelector(".data-section-basic-func");
        addClass.classList.add("highlightNav");

    } else if (currentPosition > moreFunctionsPosition && currentPosition < signUpPosition) {
        delateClass = document.querySelectorAll(".data-section-basic-func, .data-section-sign-up, .data-section-team");
        delateClass.forEach((item) => {
            item.classList.remove("highlightNav");
        });
        addClass = document.querySelector(".data-section-more-func");
        addClass.classList.add("highlightNav");
    } else if (currentPosition > signUpPosition && currentPosition < teamPosition) {
        delateClass = document.querySelectorAll(".data-section-basic-func, .data-section-more-func, .data-section-team");
        delateClass.forEach((item) => {
            item.classList.remove("highlightNav");
        });
        addClass = document.querySelector(".data-section-sign-up");
        addClass.classList.add("highlightNav");

    } else if (currentPosition > teamPosition) {
        delateClass = document.querySelectorAll(".data-section-basic-func, .data-section-more-func, .data-section-sign-up");
        delateClass.forEach((item) => {
            item.classList.remove("highlightNav");
        });
        addClass = document.querySelector(".data-section-team");
        addClass.classList.add("highlightNav");
    }
});


Can you write the code more simply?

document.addEventListener（“滚动”），函数（）{
让currentPosition=window.scrollY；
让basicFunctionPosition=document.querySelector（“#basic function”）.offsetop；
让moreFunctionsPosition=document.querySelector（“更多函数”）.offsetTop；
让signUpPosition=document.querySelector（“注册”）.offsetop；
让teamPosition=document.querySelector（#team”）.offsetTop；
设addClass=“”；
让delateClass=“”；
if（当前位置<基本功能位置）{
delateClass=document.querySelectorAll（“.data节基本函数、.data节更多函数、.data节注册、.data节团队”）；
delateClass.forEach（（项目）=>{
item.classList.remove（“highlightNav”）；
});
}否则如果（currentPosition>basicFunctionPosition&¤tPosition{
item.classList.remove（“highlightNav”）；
});
addClass=document.querySelector（“.data section basic func”）；
addClass.classList.add（“highlightNav”）；
}else if（currentPosition>moreFunctionsPosition&¤tPosition{
item.classList.remove（“highlightNav”）；
});
addClass=document.querySelector（“.data节更多函数”）；
addClass.classList.add（“highlightNav”）；
}否则如果（currentPosition>signUpPosition&¤tPosition{
item.classList.remove（“highlightNav”）；
});
addClass=document.querySelector（“.data节注册”）；
addClass.classList.add（“highlightNav”）；
}else if（当前职位>团队职位）{
delateClass=document.querySelectorAll（“.data节基本函数、.data节更多函数、.data节注册”）；
delateClass.forEach（（项目）=>{
item.classList.remove（“highlightNav”）；
});
addClass=document.querySelector（“.data section team”）；
addClass.classList.add（“highlightNav”）；
}
});
你能把代码写得更简单些吗？