本文介绍如何利用 intersection observer api，在用户滚动至指定区域时精准控制章节标题的字体大小变化，避免传统 scroll 事件因 sticky 布局导致的误触发问题，特别适用于 elementor 构建的 wordpress 单页多节场景。

本文介绍如何利用 intersection observer api，在用户滚动至指定区域时精准控制章节标题的字体大小变化，避免传统 scroll 事件因 sticky 布局导致的误触发问题，特别适用于 elementor 构建的 wordpress 单页多节场景。

在构建具有视差/粘性滚动效果的单页网站（如 Elementor 搭建的 WordPress 页面）时，常需实现“当下一节标题即将覆盖当前标题时，逐步缩小当前标题字号”的交互动效。但直接监听 window.onscroll 容易失效——尤其当多个 section 设置为 position: sticky 时，滚动事件无法区分是“本节到达顶部”还是“下节正在逼近”，导致字体缩放逻辑错位。

此时，Intersection Observer API 是更精准、高性能且语义清晰的解决方案。它不依赖频繁的滚动计算，而是异步监听目标元素与视口（或指定根容器）的交叉状态，天然适配 sticky 布局下的动态临界点判断。

✅ 实现步骤（Elementor 兼容）

1. 在 Elementor 中添加触发锚点
   进入对应 section 的「高级」→「自定义 CSS 类」，为每个需触发缩放的 前一节标题 添加唯一类名（如 section-2-title），并在其下方（即下一节起始位置）插入一个不可见的触发器 <div>：

   <!-- 在 Section 2 结束处、Section 3 开始前插入 -->
   <div class="scroll-trigger" data-target="section-2-title" style="height: 1px; width: 100%; margin-top: -1px;"></div>

   ? 提示：Elementor 可通过「HTML 小工具」或「自定义 HTML」模块插入；margin-top: -1px 确保触发点紧贴下一节顶部，实现“刚接触即响应”。

2. 编写轻量级 JavaScript（推荐放入主题页脚或自定义 JS 文件）

   document.addEventListener('DOMContentLoaded', () => {
     // 配置观察器：当触发器进入视口 80% 时开始响应（可调）
     const observer = new IntersectionObserver(
       (entries) => {
         entries.forEach(entry => {
           if (entry.isIntersecting) {
             const targetClass = entry.target.dataset.target;
             const titleEl = document.querySelector(`.${targetClass} h2, .${targetClass} h3`);
             if (titleEl) {
               // 平滑过渡 + 动态缩放（示例：从 2.5rem 缩至 1.2rem）
               titleEl.style.transition = 'font-size 0.4s ease';
               titleEl.style.fontSize = '1.2rem';
             }
           } else {
             // 恢复原始尺寸（建议预设 CSS 类而非内联样式）
             const titleEl = document.querySelector(`.${entry.target.dataset.target} h2, .${entry.target.dataset.target} h3`);
             if (titleEl) {
               titleEl.style.fontSize = '';
               titleEl.classList.remove('title-shrunk');
               titleEl.classList.add('title-normal');
             }
           }
         });
       },
       { threshold: 0.8 } // 触发灵敏度：80% 可见即激活
     );
   
     // 观察所有触发器
     document.querySelectorAll('.scroll-trigger').forEach(trigger => {
       observer.observe(trigger);
     });
   });

3. 增强健壮性：CSS 预设与回退
   在主题自定义 CSS 中定义基础样式，避免 JS 失效时布局崩坏：

   .section-2-title h2,
   .section-2-title h3 {
     font-size: 2.5rem;
     transition: font-size 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
   }
   .section-2-title.title-shrunk h2,
   .section-2-title.title-shrunk h3 {
     font-size: 1.2rem;
   }

   ⚠️ 注意事项：

   • 避免内联样式污染：优先用 classList.toggle() 控制 CSS 类，而非直接操作 style.fontSize，便于维护和主题升级兼容；
   • 性能优化：threshold 值不宜过小（如 0.01），否则高频触发影响性能；
   • Elementor 元素选择器：若标题被包裹在 Elementor 自动生成的 div 中，使用浏览器开发者工具检查实际 HTML 结构，调整 querySelector 路径（如 .section-2-title .elementor-heading-title）；
   • 移动端适配：在媒体查询中为小屏幕设置更保守的缩放比例，防止文字过小影响可读性。

通过 Intersection Observer，你不再需要手动计算滚动距离或监听 scroll 事件——只需声明“当某元素进入视野时执行什么”，即可优雅实现标题随滚动渐变的视觉动效，让多节粘性布局兼具功能性与表现力。