Wordpress Divi固定页眉跨页位置不一致致Logo切换不同步求修复

你遇到的Logo与页眉背景切换错位，本质是两套独立逻辑没有对齐：

• 你写的jQuery脚本是硬编码固定滚动阈值50px来触发Logo切换
• Divi主题的固定页眉触发机制是动态计算当前页面的实际页眉高度来决定固定头出现的时机，根本不是写死50px
• 主页刚好因为页面结构特殊，Divi计算出来的固定头触发距离和50px基本重合，所以运行正常；其他页面因为初始页眉高度、顶部内容占位有差异，Divi的触发点和你脚本的50px阈值出现偏差，就会出现Logo先换、页眉背景后变的错位

直接对齐Divi本身的固定页眉状态，不自己硬算滚动距离——不管在哪个页面、固定头实际是在滚动多少距离触发，只要固定页眉正式加载，就同步切换Logo，从根源上消除时机差。

• 实现原理：Divi固定页眉激活时，会给主页眉元素#main-header自动加上et-fixed-header专属类，失活时就移除这个类。直接监听这个类的变化，比自己判断滚动距离稳定得多
• 操作方式：完全删掉你之前写的滚动监听旧脚本，替换成如下代码：

jQuery(document).ready(function($) {
    // 替换成你自己的两个Logo图片地址
    const normalLogoPath = 'link_to_primary_top_menu_logo';
    const fixedLogoPath = 'link_to_fixed_header_logo';
    const logoElement = $('#logo');

    // 核心同步函数：根据固定页眉的状态匹配对应Logo
    function syncHeaderLogo() {
        if ($('#main-header').hasClass('et-fixed-header')) {
            logoElement.attr('src', fixedLogoPath);
        } else {
            logoElement.attr('src', normalLogoPath);
        }
    }

    // 页面初始加载时先执行一次同步，避免刷新时位置错位
    syncHeaderLogo();

    // 监听主页眉的类名变化，类变更就立刻同步Logo
    const headerObserver = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutationItem) {
            if (mutationItem.attributeName === 'class') {
                syncHeaderLogo();
            }
        });
    });
    headerObserver.observe(document.getElementById('main-header'), { attributes: true });
});

• 方案优势：
  • 完全适配所有页面，不管某个页面的固定头是在滚动30px还是200px触发，都不会出现Logo和背景的切换时差
  • 不需要给不同页面写多版本适配脚本，也不需要强行修改Divi的原生触发逻辑，零维护成本
  • 即使后续Divi更新版本调整固定头的触发计算逻辑，只要et-fixed-header这个类名不变，脚本就不会失效

如果你就是想让所有页面的固定页眉都在同一个滚动位置（比如统一在滚动50px时触发），可以主动把Divi的固定头触发阈值统一改成和你原来脚本匹配的数值，再保留你原来的滚动换Logo脚本即可。

• 只需要额外加一段调整Divi固定头配置的代码：

// 统一所有页面的固定页眉触发滚动距离为50px
jQuery(document).on('divi:after.js-init', function() {
    if (typeof et_pb_fixed_header_vars !== 'undefined') {
        et_pb_fixed_header_vars.fixedHeaderOffset = 50;
    }
});

• 注意事项：
  • 这个方案有明显局限性：如果某个页面的初始页眉本身高度就超过50px，会出现页眉还没完全滚出视口、固定头就提前固定的视觉错位，只适合所有页面初始页眉高度基本一致的场景
  • 调整完触发位置后，你原来写的50px阈值滚动脚本不需要改动，固定头和Logo的切换时机就会完全对齐

内容的提问来源于stack exchange，提问作者staty1k