如何让Elementor页眉继承所在区块背景色并随滚动切换？

问题描述 #

用Elementor搭建网站时，需要首页页眉根据所在区块背景色自动切换：英雄视频区域页眉为透明，滚动到#one区块时页眉背景变为#002C50，滚动到#two区块时变为#21654E。之前尝试用inherit属性继承body背景色未生效，现有jQuery代码仅实现了body背景色随滚动变化。

解决方案 #

核心思路是直接针对Elementor页眉元素设置背景色（Elementor页眉组件通常有独立样式优先级，inherit会被内置样式覆盖），同时调整滚动判断逻辑确保切换顺序正确。

1. Elementor页眉基础设置

   • 打开Elementor页眉编辑器，将页眉背景色设置为透明，取消任何预设的固定背景或纯色背景配置，避免样式冲突。

2. 修改滚动事件代码
   调整现有jQuery代码，同时更新页眉的背景色，确保滚动判断顺序从下到上（优先判断下方区块）：

jQuery(document).ready(function($) {
    // 获取Elementor页眉元素（类名不符时替换为实际页眉类）
    var $header = $('.elementor-header');
    // 预存各区块的顶部位置
    var oneTop = $('#one').position().top;
    var twoTop = $('#two').position().top;

    $(window).on('scroll touchmove', function() {
        var scrollPos = $(document).scrollTop();
        
        // 优先判断是否滚动到#two区块（下方区块）
        if (scrollPos > twoTop) {
            $header.css('background-color', '#21654E');
        } 
        // 再判断是否处于#one区块范围内（未到#two）
        else if (scrollPos >= oneTop && scrollPos <= twoTop) {
            $header.css('background-color', '#002C50');
        } 
        // 默认状态：英雄区（未滚动到#one）
        else {
            $header.css('background-color', 'transparent');
        }
    });
});

3. 样式优先级保障（可选）
   如果Elementor内置样式仍覆盖代码设置，可在自定义CSS中添加更高优先级规则，还能加入过渡动画提升体验：

body .elementor-header {
    background-color: transparent !important;
    transition: background-color 0.3s ease; /* 平滑过渡效果 */
}

额外优化（可选） #

若页面有动态内容导致区块位置变化，可添加窗口 resize 事件重新计算区块位置，避免滚动判断失效：

$(window).on('resize', function() {
    oneTop = $('#one').position().top;
    twoTop = $('#two').position().top;
});

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