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

【问题标题】：Why is this not changing color after scrolling? CSS/Javascript为什么滚动后颜色不改变？ CSS/Javascript
【发布时间】：2019-09-20 16:08:42
【问题描述】：

我正在创建一个标题，它在滚动后使用 CSS 和 Javascript 执行各种操作。我必须忽略一些阻止悬停下划线在滚动后从黑色变为白色的东西。它应该始终与链接的颜色相同。这是要查看的链接：http://www.exploreloudoncounty.com/

有什么想法吗？谢谢！

HTML：

    <a class="nav__link" href="https://www.exploreloudoncounty.com/explore">Explore</a>
    <a class="nav__link" href="https://www.exploreloudoncounty.com/join">Join</a>
    <a class="nav__link" href="https://www.exploreloudoncounty.com/about">About</a>
    <a class="nav__link" href="https://www.exploreloudoncounty.com/contact">Contact</a>

CSS：

.nav__link {
    margin-right: 1em;
    font-size: 1em;
    color: #000;
    text-decoration: none;
    transition: 0.4s;
    display: inline-block;
}

.nav__link::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background-color: #000;
    transition: width .3s;
}

.nav__link:hover::after {
    width: 100%;
}

        .nav__link.sticky a {
            margin-right: 1em;
            font-size: 1em;
            color: #fff;
            text-decoration: none;
            transition: 0.4s;
            display: inline-block;
        }

        .nav__link::after.sticky a {
            content: '';
            display: block;
            width: 0;
            height: 2px;
            background: #fff;
            background-color: #fff;
            transition: width .3s;
        }

        .nav__link:hover::after.sticky a {
            width: 100%;
        }

JS：

    if (scrollPosition > 100){
        document.querySelector('.nav__link').classList.add('sticky');
    }
    else {
        document.querySelector('.nav__link').classList.remove('sticky');
    }

【问题讨论】：

标签： javascript html css scroll hover

【解决方案1】：

你应该把你的 css 改成这样：

.nav__link.sticky::after

这是因为.sticky 类与.nav__link 在同一个元素中。

如果你想在你的样式中使用a元素，你应该把它放在代码的前面，像这样：

a.nav__link.sticky::after

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

【讨论】：

这有帮助！谢谢！但是，仅限于第一个链接。知道为什么它不适用于其他人吗？我找不到他们之间有什么不同。

【解决方案2】：

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

您链接的来源有this JS，您会看到他们在开头声明为：

let scrollPosition = Math.round(window.scrollY);

他们还将它封装在一个名为 _.throttle 的 lodash 函数中，但您可以使用 setTimeout 实现相同的功能，它只是确保该函数不时被调用（此处为 300 毫秒）。

【讨论】：

我不认为这是 JS 的问题。这是与 CSS 相关的。
@avcajaraville 可能那时，我不是一个 CSS 英雄，所以我只注意到 JS 部分:)

【解决方案3】：

我想补充@Kjvhout 的答案。

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

为了解决这个问题，我会做以下事情：

移除JS一并，如果你检查dom，你可以看到header已经包含了一个sticky class，所以不需要在anchors中添加一个新的。
重写 CSS 以匹配这个 DOM 结构，这样的东西应该可以工作：

.sticky .nav__link:after {
  display: block;
  width: 0;
  height: 2px;
  background: #fff;
  background-color: rgb(255, 255, 255);
  color: #fff;
  background-color: #fff;
  transition: width .3s;
}

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

@Kjvhout 答案仅适用于第一个的原因是 JS 部分，您的选择器 document.querySelector('.nav__link') 仅选择一个 HTMLElement，要获取您应该使用 document.querySelectorAll('.nav__link') 的所有集合，然后遍历此集合并应用对应的类。

但正如我之前所说，我的解决方案更简单，因为您不需要处理 JS。

【讨论】：