Css 更改滚动条上的文本颜色

当我滚动时，导航栏从透明背景变为白色背景。文本在透明屏幕上为白色，但我想在滚动时将文本更改为黑色以获得对比度。问题是颜色：黑色不起作用？我不知道这些信息是否足以找到解决方案，只需写一篇评论，说明你还需要什么

HTML

<header class="navbar-fixed-top">
  <a href="#" id="logo" class="logo">Example<br>1001</a>
  <nav id="navigation">
      <ul class="nav__links">
        <li><a class="hvr-reveal hjem" href="#">HOME1</a></li>
        <li><a class="hvr-reveal webkamera" href="#">HOME2</a></li>
        <li><a class="hvr-reveal værmelding" href="#">HOME3</a></li>
        <li><a class="hvr-reveal status_nav" href="#">HOME4</a></li>
      </ul>
  </nav>
</header>

---

使用jQuery，您可以这样做

$(document).ready(function(){       
        var scroll_pos = 0;
        $(document).scroll(function() { 
            scroll_pos = $(this).scrollTop();
            if(scroll_pos > 210) {
                $('.hvr-reveal').css('color', '#000');
            } else {
                $('.hvr-reveal').css('color', '#fff');
            }
        });
    });

---

你可以试着对你的方法更具体一些。 例如，请尝试以下操作：

.navbar-fixed-top.scrolled {
  background-color: red !important;
  transition: background-color 200ms linear;
  z-index: 1;
  color: black;
}

.navbar-fixed-top.scrolled #navigation li .hvr-reveal {
color: black !important;
}

---

这样，即使您有冲突的引导样式，也可以为您节省时间。此外，如果代码位于外部样式表中，请尝试将其包含在

标记中的引导样式表链接下方。这为您的外部样式提供了更高的优先级。

您是否尝试过添加！关于黑色也很重要吗？我已经有了一个脚本，可以在图标上滚动时添加一个
$（function（）{$（document）.scroll（function（）{var$nav=$（“.navbar fixed top”）；$nav.toggleClass（'scrolled'，$（this.scrollTop（）>$nav.height（））；if（$（this.scrollTop（）>$nav.height（））{$（'#logo'）.html（“示例1001”）；}否则{$（'logo'）.html（“示例
1001”）}）；是否可以将您的脚本包含在此脚本中？我绝对没有使用js的经验。是的，你可以添加$（'.hvr-reveal'）.css（'color'，'#000'）；在您的滚动脚本上。使用此解决方案，我走近了，li项变为黑色。但是，当我尝试添加logo以及添加#logo或.logo时，所有内容都会重置为原始内容white@andve您是否在css样式中添加了#徽标？如果你能告诉我这个问题，我可以帮你更多。尝试为codepen或JSFIDLE留下链接。非常感谢您的帮助！我使用了你所做的和js的组合，得到了一个有效的结果。

.navbar-fixed-top.scrolled {
  background-color: red !important;
  transition: background-color 200ms linear;
  z-index: 1;
  color: black;
}

.navbar-fixed-top.scrolled #navigation li .hvr-reveal {
color: black !important;
}