Question

我在自托管的 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，使按钮顶部为白色，滚动时变为黑色？

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 在滚动时自动向 header 元素添加一个类，该类为 .et-fixed-header。

但是，要启用此功能，您应该从后端->DIVI->主题选项

启用选项“固定导航栏”

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

滚动时更改汉堡菜单的颜色

2 个答案: