在滚动条上更改汉堡菜单的颜色

Question

我在自托管的 WordPress（使用 Divi）上建立了一个站点。 该站点使用两个菜单标志，一个用于主菜单栏，第二个用于固定 header。 使用以下代码滚动时徽标会发生变化：

<script>
    
jQuery(window).scroll(function () {
    if (jQuery(window).scrollTop() > 50) {
        jQuery('#logo').attr('src','link_to_fixed_header_logo')
    } else {
         jQuery('#logo').attr('src','link_to_primary_top_menu_logo')
    }
});

</script>

我希望该网站在移动版本中更改滚动时汉堡包按钮的颜色。 检查工具显示颜色由以下几行定义：

body.et_divi_100_custom_hamburger_menu .et_divi_100_custom_hamburger_menu__icon div {
    background: #000!important;

我用这个 CSS 使汉堡按钮变黑。 是否可以通过 JQuery 代码更改 CSS，使按钮顶部为白色，滚动时变为黑色？

Answer 1

当然，您可以修改 Javascript 以使用现有的滚动处理程序设置汉堡菜单的颜色。 您也许可以使顶部的选择器更好一些，但我不知道您页面的结构。

jQuery(window).scroll(function () {
    var hamburgerImage = jQuery('body.et_divi_100_custom_hamburger_menu .et_divi_100_custom_hamburger_menu__icon div');
    if (jQuery(window).scrollTop() > 50) {
        jQuery('#logo').attr('src','link_to_fixed_header_logo');
        hamburgerImage.css('background-color', '#FFF');
    } else {
        jQuery('#logo').attr('src','link_to_primary_top_menu_logo');
        hamburgerImage.css('background-color', '#000');
    }
});

Answer 2

只需使用 CSS 即可完成，无需 JS。

DIVI 在滚动时会自动将 class 添加到header元素中， class 是.et-fixed-header 。

但是，要启用此功能，您应该从Backend->DIVI->Theme Options启用选项“Fixed Navigation Bar”

使用它来更改颜色： body.et_divi_100_custom_hamburger_menu header.et-fixed-header.et_divi_100_custom_hamburger_menu__icon div{}