javascript - 移动到另一个 anchor 时更改样式

Question

https://blackrockdigital.github.io/startbootstrap-freelancer/

正如本例所示，当我移动到每个 anchor 时，我想在每个菜单文本上给出背景颜色。我更喜欢不使用 Bootstrap 而只使用常规 javascript。

我的想法是添加一个看起来像的函数

function changeColor() {
    if (window.scrollY == sectionClass.offsetTop) {
    document.querySelector('.sectionClass').classList.add("newColorClass");
} else {
    document.querySelector('.sectionClass').classList.remove("newColorClass");
    }
}

当滚动位置位于该部分的 offsetTop 位置时，它会向元素添加一个具有背景颜色样式的类。

但这似乎并没有达到我的预期。

有什么想法吗？

Answer 1

这些是类......而不是 anchor 。 如果你想让它检测 anchor ，它们需要是#。

但更重要的是，sectionClass.offsetTop，sectionClass是否在任何地方定义为变量？尝试一下

window.scrollY == document.querySelector('.sectionClass').offsetTop

请注意，这不适用于“每个类(class)”，它可能只适用于第一个类(class)。您需要为每个 querySelector 创建一个循环