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

【问题标题】：Changing color of hamburger menu on scroll在滚动条上更改汉堡菜单的颜色
【发布时间】：2021-02-01 21:50:28
【问题描述】：

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

<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，使按钮顶部为白色，滚动时变为黑色？

【问题讨论】：

标签： javascript jquery css wordpress

【解决方案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');
    }
});

【讨论】：

【解决方案2】：

这可以通过 CSS 来完成，不需要 JS。

DIVI 在滚动时会自动向header 元素添加一个类，该类是.et-fixed-header。

但是，要启用此功能，您应该启用 Backend->DIVI->Theme Options

中的选项“固定导航栏”

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

【讨论】：