如何在特定滚动位置调整WordPress Elementor中区块标题的字号？

核心思路 #

因为粘性定位元素的层级和定位特性，直接监听滚动修改当前置顶元素的样式会失效。我们需要通过监听第3个区块与第2个区块的位置距离，动态计算并修改第2个区块标题的字号。

操作步骤 #

1. 给目标元素设置自定义标识

   • 编辑第2个粘性区块：在Elementor「高级」面板中，设置CSS ID为sticky-block-2；找到区块内的标题组件，在其「高级」面板的CSS类中添加block-title-2
   • 编辑第3个粘性区块：同样在「高级」面板设置CSS ID为sticky-block-3

2. 添加自定义JavaScript代码
   打开WordPress后台，进入「外观」→「自定义」→「自定义代码」（或在Elementor当前页面的「页面设置」→「自定义代码」中添加），粘贴以下代码：

   window.addEventListener('scroll', function() {
     // 获取目标元素，找不到就终止执行
     const block2 = document.getElementById('sticky-block-2');
     const block3 = document.getElementById('sticky-block-3');
     const title2 = document.querySelector('.block-title-2');
     if (!block2 || !block3 || !title2) return;
   
     // 获取两个区块的位置信息
     const block2Bottom = block2.getBoundingClientRect().bottom;
     const block3Top = block3.getBoundingClientRect().top;
   
     // 计算两个区块的间距
     const distance = block2Bottom - block3Top;
   
     // 可自定义的参数
     const triggerDistance = 200; // 间距小于这个值开始缩放
     const originalFontSize = 24; // 标题原始字号（单位：px）
     const minFontSize = 16; // 标题最小字号（单位：px）
   
     // 计算缩放比例，限制在0-1之间
     const scale = Math.max(0, Math.min(1, distance / triggerDistance));
     // 计算当前字号
     const currentSize = originalFontSize * scale + minFontSize * (1 - scale);
   
     // 应用到标题上
     title2.style.fontSize = `${currentSize}px`;
   });
   

3. 调整参数适配你的页面

   • 修改代码里的originalFontSize为你第2个标题原本的字号
   • 修改minFontSize为你想要的最小字号
   • 修改triggerDistance为你希望开始触发缩放的距离（比如200px代表第3个区块离第2个区块底部还有200px时开始缩小）

4. 测试验证
   保存设置后刷新页面，滚动查看效果：当第3个区块逐渐靠近第2个区块时，第2个区块的标题会平滑缩小到设定的最小字号。

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