如何在滚动到特定位置时动态调整章节标题字体大小

花韻仙語

发布时间：2026-02-14 13:19:29

754人浏览过

来源于php中文网

原创

如何在滚动到特定位置时动态调整章节标题字体大小

本文介绍如何利用 intersection observer api，在页面滚动至指定区域时精准控制章节标题的字体大小变化，特别适用于 elementor 构建的 wordpress 粘性分段布局，解决因 sticky 定位导致传统 scroll 监听失效的问题。

本文介绍如何利用 intersection observer api，在页面滚动至指定区域时精准控制章节标题的字体大小变化，特别适用于 elementor 构建的 wordpress 粘性分段布局，解决因 sticky 定位导致传统 scroll 监听失效的问题。

在使用 Elementor 构建多段式粘性（sticky）页面时，一个常见且富有表现力的设计需求是：当用户向下滚动、下一段内容即将“覆盖”当前段标题时，动态缩小该标题字体，从而为导航菜单腾出空间并增强视觉动效。但由于各 section 设置为 position: sticky，其自身并不随文档流滚动，因此基于 window.scrollY 的传统滚动监听无法准确反映“相邻区块接近”的状态——标题会在本段到达视口顶部时就触发变化，而非在下一段即将贴合其底部时响应。

此时，Intersection Observer API 是更精准、性能更优的解决方案。它不依赖滚动事件，而是异步观察目标元素与根容器（通常是视口）的交叉状态，天然适配 sticky 布局下的相对位置判断。

✅ 实现步骤（Elementor + 自定义 JS）

在 Elementor 页面中插入触发锚点
在每个需触发字体变化的 section 下方边界处（即紧邻下一节的位置），通过「HTML 小工具」或「自定义 HTML」添加轻量级触发器：
```

<div id="trigger-section1-shrink" class="scroll-trigger" style="height: 1px; margin-top: -1px;"></div>
```
? 提示：margin-top: -1px 确保触发器紧贴上一节底部，height: 1px 避免影响布局；可为所有触发器统一加 scroll-trigger 类便于批量管理。

编写 Intersection Observer 脚本
将以下 JavaScript 添加至 WordPress 主题的 footer.php、子主题 functions.php（通过 wp_add_inline_script），或 Elementor 的「自定义 JS」设置中（推荐使用「页脚」位置）：

document.addEventListener('DOMContentLoaded', () => {
  // 定义标题与对应触发器的映射关系
  const titleTriggerMap = [
    { titleSelector: '.section-1 h2', triggerId: 'trigger-section1-shrink', minSize: '18px', maxSize: '36px' },
    { titleSelector: '.section-2 h2', triggerId: 'trigger-section2-shrink', minSize: '16px', maxSize: '32px' },
    { titleSelector: '.section-3 h2', triggerId: 'trigger-section3-shrink', minSize: '14px', maxSize: '28px' }
  ];

  // 创建通用观察器（阈值设为 0.1，表示 10% 进入视口即触发）
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (!entry.isIntersecting) return;

      const mapping = titleTriggerMap.find(m => m.triggerId === entry.target.id);
      if (!mapping) return;

      const titleEl = document.querySelector(mapping.titleSelector);
      if (!titleEl) return;

      // 平滑过渡字体大小（可替换为 CSS 变量或 transform 缩放）
      titleEl.style.transition = 'font-size 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)';
      titleEl.style.fontSize = mapping.minSize;
    });
  }, { threshold: 0.1 });

  // 绑定所有触发器
  titleTriggerMap.forEach(mapping => {
    const trigger = document.getElementById(mapping.triggerId);
    if (trigger) observer.observe(trigger);
  });
});

可选：反向恢复（滚动回退时放大）
若需标题在触发器离开视口后恢复原尺寸，修改回调逻辑：

entries.forEach(entry => {
  const mapping = titleTriggerMap.find(m => m.triggerId === entry.target.id);
  const titleEl = document.querySelector(mapping?.titleSelector);
  if (!titleEl || !mapping) return;

  titleEl.style.transition = 'font-size 0.4s ease';
  titleEl.style.fontSize = entry.isIntersecting ? mapping.minSize : mapping.maxSize;
});

⚠️ 注意事项

选择器准确性：确保 .section-1 h2 等选择器与 Elementor 实际生成的 class/ID 一致（建议在浏览器开发者工具中检查并使用唯一 class，如 elementor-element-abc123 h2）。
CSS 优先级：若 Elementor 内联样式干扰，可在 JS 中使用 !important（不推荐）或改用 CSS 自定义属性（CSS Variables）：

FineVoice语音克隆
免费在线语音克隆，1 分钟克隆你的声音，保留口音和所有细微差别。

下载
```
.section-1 h2 { font-size: var(--title-size, 36px); }
```
JS 中改为：titleEl.style.setProperty('--title-size', mapping.minSize);
性能保障：Intersection Observer 天然防抖，无需额外节流；避免在 scroll 事件中操作 DOM。
兼容性：现代浏览器均支持（Chrome 51+, Firefox 55+, Safari 12.1+）。如需支持旧版 IE，需引入 polyfill。