类在使用js滚动时不激活

Question

当你在我的HTML页面上滚动时当你到达某个部分时，相应的部分应该是活跃的

例如:

<nav class="scrollmenu">
<ul>
<li class="starters"><a href="#starters">STARTERS</a></li>
<li class="ramen"><a href="#ramen">RAMEN</a></li>
</ul>
</nav>

启动器应该在你到达页面的这个部分时激活:<section id="starters" class="foodgrid">...</section>

我想用这个JS代码做这个:

const sections = document.querySelectorAll("section");
const navLi = document.querySelectorAll("nav ul li");
window.addEventListener("scroll", () => {
let current = " ";
sections.forEach((section) => {
const sectionTop = section.offsetTop;
const sectionHeight = section.clientHeight;
if (scrollY >= sectionTop) {
current = section.getAttribute("id");
}
});
navLi.forEach((li) => {
li.classList.remove("active");
if (li.classList.contains(current)) {
li.classList.add("active");
}
});

});

我仍然要扩展这个JS代码，使它更好地工作，但如果我没有弄错的话，它应该已经使类在视觉上活跃，当我在正确的部分。

如果你想知道我的CSS现在看起来是这样的:

nav ul li:active {
background-color: blue;
}

Answer 1

这里的情况是你附加了一个活动的类名你没有声明这个类，你只有事件:active当你点击元素时触发，所以你必须这样做

.active {
background-color: blue;
}

当你设置类并删除它时，它会起作用，同时保留你的CSS代码当HTML li元素被点击时它会改变它的背景然后变成正常的颜色，试一下告诉我它是否起作用，如果不起作用，那是你的js的问题然后我会检查