为什么在滚动后不改变颜色？CSS/Javascript

我正在创建一个标题，在滚动之后，它使用CSS和Javascript执行各种操作。我一定是忽略了一些东西，它们阻止了鼠标悬停时的下划线在滚动后从黑色变为白色。它应该始终与链接的颜色相同。 以下是要查看的链接：

有什么想法吗？谢谢

HTML:

JS:

---

您应该将css更改为：

.nav__link.sticky::after

这是因为

.sticky

类与

.nav\u link

位于同一元素中

如果您想在样式中使用

a

元素，您应该将其放在代码前面，如下所示：

a.nav__link.sticky::after

---

这是因为类位于该元素内，因此该元素必须位于前面。

如果打开console（按F12键），会出现什么错误？ 因为如果这是完整的JS，那么您将得到未定义的scrollPosition

您链接的源已存在，并且您看到他们在开始时将其声明为：

let scrollPosition=Math.round（window.scrollY）

他们还将其封装在一个名为u.throttle的lodash函数中，但您可以使用setTimeout来验证它，它只是确保该函数不时被调用（此处为300毫秒）。
我想补充@Kjvhout answer

由于JS部分的选择器错误，该解决方案仅适用于第一个链接

为了修复它，我将执行以下操作：


完全删除JS，，如果您检查dom，您可以看到头部已经包含一个粘性类，因此无需向锚添加新类
重写CSS以匹配此DOM结构，类似这样的操作应该可以：

.sticky.nav\u链接：之后{
显示：块；
宽度：0；
高度：2倍；
背景：#fff；
背景色：rgb（255、255、255）；
颜色：#fff；
背景色：#fff；
过渡：宽度3s；
}

这应该可以解决这个问题，并且是一个更好的解决方案，因为您可以摆脱未使用的JS部件

@Kjvhout answer只对第一个起作用的原因是JS部分，您的选择器
document.querySelector（'.nav\uu link'）
只选择一个HTMLElement，以获取您应该使用的所有集合
document.queryselectoral（'.nav\uu link'））
，然后迭代此集合并应用相应的类

但正如我前面所说，我的解决方案更简单，因为您不需要处理JS。
我认为这不是JS的问题。这与CSS有关。@avcajaraville可能是这样，我不是一个CSS英雄，所以我只注意到JS部分：）有帮助！非常感谢。但是，仅限于第一个链接。你知道为什么它不适用于其他人吗？我找不到他们之间有什么不同。
    if (scrollPosition > 100){
        document.querySelector('.nav__link').classList.add('sticky');
    }
    else {
        document.querySelector('.nav__link').classList.remove('sticky');
    }

.nav__link.sticky::after

a.nav__link.sticky::after