本文介绍一种可靠方案，通过监听滚动并结合 `getboundingclientrect()` 精确判断标题在粘性容器内的可视状态，实现滚动过程中标题逐个高亮、淡入与展开的动画效果，同时彻底解决粘性元素导致滚动事件中断的问题。
在构建滚动驱动型内容展示（如产品介绍页、时间轴或引导式叙事）时，常需让一组标题随用户滚动在固定位置（如 position: sticky 容器内）依次激活。但开发者常遇到一个关键障碍：一旦 .sticky 元素生效，其脱离文档流的特性可能干扰滚动事件的持续触发逻辑，导致后续动画“卡住”——即仅首次进入时生效，之后不再响应滚动。
根本原因在于：原逻辑依赖 headingRect.top <= viewportHeight / 2 这一全局视口判断，而当 .sticky 容器吸顶后，其内部子元素的 getBoundingClientRect() 返回值会相对于当前粘性容器顶部而非整个视口，造成坐标系错位；同时，若未正确管理激活状态切换（如未清除旧 .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 结构建议（语义化 + 稳定布局）
<section class="hero" style="height: 100vh;"></section>
<section class="sticky">
<div class="text-animations">
<h1 class="animated-text active" aria-current="true">Intro</h1>
<h2 class="animated-text">First</h2>
<h2 class="animated-text">Second</h2>
<h2 class="animated-text">Third</h2>
</div>
<div class="intro_content">
<!-- 长文本内容 -->
</div>
</section>
<section class="end" style="height: 100vh;"></section>该方案不依赖第三方库，纯原生实现，兼顾性能、可维护性与跨浏览器一致性。通过将判定逻辑锚定在粘性容器自身边界，彻底规避了全局滚动坐标系漂移问题，让标题动画真正“跟随滚动节奏”，而非“卡在初始状态”。
