更改 Scroll JQuery 上活动菜单的颜色答案

【问题标题】：Change color of active menu on Scroll JQuery更改 Scroll JQuery 上活动菜单的颜色
【发布时间】：2022-01-18 12:35:23
【问题描述】：

我正在使用脚本来更改滚动导航链接的颜色，但我不知道如何为活动链接执行此操作，有人可以帮忙吗？

<script>
jQuery(document).ready(function(){
jQuery(window).scroll(function() {
var scroll = jQuery(window).scrollTop();

if (scroll >= 100) {
jQuery(".current-menu-item").addClass("current-menu-item-sticky");
}
else{
jQuery(".current-menu-item").removeClass("current-menu-item-sticky");
}
});
});
</script>

这个类代码负责颜色，如何在滚动时更新颜色？

.et_pb_menu_0_tb_header.et_pb_menu ul li.current-menu-item a {
    color: #fff!important;
}

【问题讨论】：

通过添加.et_pb_menu_0_tb_header.et_pb_menu ul li.current-menu-item-sticky a { color: #f00 !important; }
如何在 JQuery 中实现它？
您可以执行jQuery('.et_pb_menu_0_tb_header.et_pb_menu ul li.current-menu-item-sticky a').css('color', 'red !important');，但您可能必须删除其他规则的!important 才能使其正常工作。
谢谢，但我想要的是更改滚动类，通过使用另一个类，我可以应用另一个 css。
是的，我明白了，但是您的代码已经添加了类，因此您不需要额外的 jQuery 命令来更改链接颜色，只需像我的第一条评论。我不明白问题是什么。究竟是什么没有按预期工作？

标签： javascript jquery css

【解决方案1】：

由于您没有提供标记，您仍然可以通过扩大 css 选择器来解决这个问题，滚动添加的 current-menu-item-sticky 类甚至不存在于您的 css 中。

所以开始使用这个 css

.current-menu-item-sticky {
   color:#fff!important;
}

如果这没有改变任何东西，原因对我来说很清楚，所有其他颜色的 css 不应该有 !important 或有正确的顺序，所以正确的 !important 将被应用。

您可以轻松使用浏览器的元素检查器并查看应用了哪些 css 以及覆盖了哪些 css

【讨论】：