本文介绍如何利用 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 兼容）
-
在 Elementor 中添加触发锚点
进入对应 section 的「高级」→「自定义 CSS 类」，为每个需触发缩放的 前一节标题 添加唯一类名（如 section-2-title），并在其下方（即下一节起始位置）插入一个不可见的触发器：<!-- 在 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 确保触发点紧贴下一节顶部，实现“刚接触即响应”。
编写轻量级 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); }); });增强健壮性：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 事件——只需声明“当某元素进入视野时执行什么”，即可优雅实现标题随滚动渐变的视觉动效，让多节粘性布局兼具功能性与表现力。
