如何在WordPress与Elementor实现滚动时Hero Header变尺寸颜色为节标题

一、基础布局搭建 #

• 用Elementor创建目标页面，先添加Hero Section（英雄区）：设置初始大尺寸（比如80vh高度）、背景色、大字号居中标题等初始样式。
• 在Hero区下方添加内容章节，保证章节顶部和Hero区无缝衔接。

二、添加自定义CSS类 #

• 选中Hero Section，在Elementor「高级」选项卡的「CSS类」中输入自定义类名，比如scroll-transform-header。
• 若需要对内容章节标题做联动调整，可给章节标题容器添加类名，比如section-title-target。

三、编写滚动触发的样式与脚本 #

1. 自定义CSS（Elementor页面自定义CSS或主题自定义CSS面板） #

/* Hero初始样式 */
.scroll-transform-header {
    transition: all 0.3s ease;
    min-height: 80vh;
    background-color: #初始背景色值;
}

/* 滚动后的变形样式 */
.scroll-transform-header.transformed {
    min-height: 10vh;
    background-color: #变形后背景色值;
    padding: 1rem 0;
}

/* 变形后标题样式调整 */
.scroll-transform-header.transformed .elementor-heading-title {
    font-size: 1.5rem;
    text-align: left;
    padding-left: 2rem;
}

2. 自定义JavaScript（用Elementor HTML小部件添加到页面底部，或主题自定义JS功能） #

基础滚动事件版本：

window.addEventListener('scroll', function() {
    const heroHeader = document.querySelector('.scroll-transform-header');
    // 定位到Hero下方的第一个内容章节，可根据实际结构调整选择器
    const contentSection = document.querySelector('.elementor-section:nth-of-type(2)');
    const sectionTop = contentSection.offsetTop;

    // 提前100px触发变形，优化视觉体验
    if (window.scrollY >= sectionTop - 100) {
        heroHeader.classList.add('transformed');
    } else {
        heroHeader.classList.remove('transformed');
    }
});

性能更优的Intersection Observer版本：

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        const heroHeader = document.querySelector('.scroll-transform-header');
        // 内容章节进入视口时恢复Hero初始样式，离开时触发变形
        entry.isIntersecting 
            ? heroHeader.classList.remove('transformed') 
            : heroHeader.classList.add('transformed');
    });
}, { threshold: 0.1 });

// 监听Hero下方的第一个内容章节
observer.observe(document.querySelector('.elementor-section:nth-of-type(2)'));

四、细节优化 #

• 调整CSS中transition的参数（比如0.5s ease-in-out），控制动画的平滑度和节奏。
• 针对移动端适配，添加媒体查询调整变形后的Hero高度、标题字体大小等。
• 测试不同滚动速度下的触发时机，确保变形效果自然不突兀。

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