本文介绍如何利用 intersection observer api 精确监听元素进入视口的时机，在滚动至指定位置时平滑改变章节标题的字体大小，特别适用于 elementor 构建的 wordpress 粘性分段布局。
本文介绍如何利用 intersection observer api 精确监听元素进入视口的时机，在滚动至指定位置时平滑改变章节标题的字体大小，特别适用于 elementor 构建的 wordpress 粘性分段布局。
在构建具有多层粘性（sticky）分段效果的 WordPress 页面（如使用 Elementor 设计）时，一个常见且富有表现力的需求是：当用户向下滚动、下一节标题即将覆盖当前标题时，动态缩小当前标题的字号，从而为顶部导航区域腾出空间，实现视觉层级过渡与交互引导。由于传统基于 window.scrollY 的监听方式在粘性布局中易受定位干扰（例如所有 section 均固定于顶部），直接监听滚动值往往导致误判——字体变化响应的是“本节自身到达顶部”，而非“下节即将覆盖本节标题”。此时，Intersection Observer API 是更精准、性能更优的解决方案。
✅ 核心思路：用“触发锚点”代替滚动计算
不依赖 scroll 事件，而是为每个需要响应的标题（如 Section 2 的标题）预先定义一个视觉临界点——即当 Section 3 的顶部（或某占位元素）进入视口时，视为“Section 2 标题应开始收缩”的信号。这个临界点可通过一个不可见的
? 实现步骤（Elementor + 自定义 JS）
-
在 Elementor 中插入触发器元素
在目标 Section（如 Section 3）的最顶端，添加一个「HTML 小工具」，插入以下代码（ID 可按需命名，如 #trigger-section3）：<div id="trigger-section3" style="position: absolute; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none;"></div>
✅ 提示：position: absolute 确保它不破坏布局；pointer-events: none 避免遮挡下方内容；极小尺寸使其不可见但可被 Observer 检测。
添加 JavaScript 监听逻辑
将以下代码放入 WordPress 主题的 footer.php（位于
