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

Posted 2023-05-08

【中文标题】更改 Scroll JQuery 上活动菜单的颜色

【英文标题】：Change color of active menu on 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 命令来更改链接颜色，只需像我的第一条评论。我不明白问题是什么。究竟是什么没有按预期工作？

【参考方案1】：

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

所以开始使用这个 css

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

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

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