本文介绍一种可靠方案，通过监听滚动并结合 `getboundingclientrect()` 精确判断标题在粘性容器内的可视状态，实现滚动过程中标题逐个高亮、淡入与展开的动画效果，同时彻底解决粘性元素导致滚动事件中断的问题。

在构建滚动驱动型内容展示（如产品介绍页、时间轴或引导式叙事）时，常需让一组标题随用户滚动在固定位置（如 position: sticky 容器内）依次激活。但开发者常遇到一个关键障碍：一旦 .sticky 元素生效，其脱离文档流的特性可能干扰滚动事件的持续触发逻辑，导致后续动画“卡住”——即仅首次进入时生效，之后不再响应滚动。

根本原因在于：原逻辑依赖 headingRect.top 当前粘性容器顶部而非整个视口，造成坐标系错位；同时，若未正确管理激活状态切换（如未清除旧 .active 类），会导致多个标题同时激活或动画失效。

✅ 正确解法是：以粘性容器为本地坐标系基准，动态检测每个标题是否完全位于其可视区域内。以下是优化后的完整实现：

✅ 核心 javaScript 逻辑（含防抖与精准判定）

const headings = document.querySelectorAll('.animated-text'); const sticky = document.querySelector('.sticky');  // 防抖处理，避免高频 scroll 触发性能问题 let scrollTimer; window.addEventListener('scroll', () => {   clearTimeout(scrollTimer);   scrollTimer = setTimeout(() => {     if (!sticky || !headings.length) return;      const stickyRect = sticky.getBoundingClientRect();     // 遍历每个标题，检查其是否「完全处于 sticky 区域内」     headings.forEach((heading, index) => {       const headingRect = heading.getBoundingClientRect();        // 关键条件：标题顶部 ≥ sticky 顶部 且 标题底部 ≤ sticky 底部       // 这确保仅当标题完全落入 sticky 可视区域时才激活       if (         headingRect.top >= stickyRect.top &&         headingRect.bottom <= stickyRect.bottom       ) {         // 移除所有 active 类，仅给当前标题添加         headings.forEach(h => h.classlist.remove('active'));         heading.classList.add('active');       }     });   }, 16); // ~60fps 节流 });

✅ 推荐 css 声明（兼顾可访问性与动画稳定性）

.animated-text {   opacity: 0;   max-height: 0;   overflow: hidden;   transition:      opacity 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),     max-height 0.8s ease,     transform 0.8s ease;   margin: 0;   line-height: 1.4; }  .animated-text.active {   opacity: 1;   max-height: 500px; /* 设定合理上限，避免 layout 波动 */   transform: translateY(-12px); }  /* 可选：为首个标题默认激活，提升首屏体验 */ .animated-text:first-child {   opacity: 1;   max-height: 500px;   transform: translateY(-12px); }

⚠️ 关键注意事项

• 勿用 height: 0/ auto 动画：height 不是 CSS 可动画属性（除非明确指定数值），改用 max-height 更可靠；
• 避免 position: absolute：它会破坏文档流，使 getBoundingClientRect() 失去相对粘性容器的参照意义；
• 粘性容器需有明确高度或内容撑开：空 .sticky 会导致 stickyRect.height === 0，判定永远失败；
• 移动端兼容性：ios safari 对 position: sticky 支持良好，但需确保父容器无 transform 或 overflow: hidden 干扰；
• 无障碍增强：为 .active 标题添加 aria-current=”true”，便于屏幕阅读器识别当前焦点项。

✅ 最终 html 结构建议（语义化 + 稳定布局）

  
   
     
Intro
     
First
     
Second
     
Third
   
   
        
 
  

该方案不依赖第三方库，纯原生实现，兼顾性能、可维护性与跨浏览器一致性。通过将判定逻辑锚定在粘性容器自身边界，彻底规避了全局滚动坐标系漂移问题，让标题动画真正“跟随滚动节奏”，而非“卡在初始状态”。