本文详解如何在 sticky 定位的容器中，通过监听滚动位置动态切换标题的 `.active` 状态，实现平滑、可控的逐项动画展示，解决粘性元素导致 scroll 事件失效或动画中断的常见问题。
在构建现代网页交互动画时，常需让一组标题（如引导式步骤或章节标签）随用户滚动，在一个固定位置（如 position: sticky 的导航栏或介绍区）中依次高亮并展开。但开发者常遇到一个关键陷阱：当 .sticky 元素生效后，其内部内容脱离文档流常规滚动检测逻辑，导致 getBoundingClientRect() 计算失准，scroll 事件看似“卡住”——实则是判断条件未适配粘性上下文。
核心问题在于：原始代码使用 headingRect.top <= viewportHeight / 2 判断是否进入视口，但该逻辑未考虑 .sticky 容器自身已脱离正常文档流，其子元素的 getBoundingClientRect() 返回的是相对于当前视口的位置，而非相对于 .sticky 容器。因此，必须将判断基准从“整个视口”切换为“.sticky 容器内部区域”。
✅ 正确解法：以 sticky 容器为坐标系锚点
我们不再依赖全局视口中心线，而是计算每个标题在 .sticky 容器内的相对位置，并仅当其完全位于容器可视区域内时激活：
const headings = document.querySelectorAll('.animated-text');
const sticky = document.querySelector('.sticky');
window.addEventListener('scroll', () => {
// 获取 sticky 容器在视口中的位置（关键锚点）
const stickyRect = sticky.getBoundingClientRect();
headings.forEach((heading, index) => {
const headingRect = heading.getBoundingClientRect();
// 判断：标题是否完全处于 sticky 容器的可视范围内
// 即：标题顶部 ≥ 容器顶部，且标题底部 ≤ 容器底部
if (
headingRect.top >= stickyRect.top &&
headingRect.bottom <= stickyRect.bottom
) {
// 激活当前项，关闭其他项（确保单次仅一个 active）
headings.forEach((h, i) => {
h.classList.toggle('active', i === index);
});
}
});
});? 样式优化要点（避免布局崩溃）
- 禁用 height: 0 → 改用 max-height：height: auto 无法参与 CSS 过渡，而 max-height 可设足够大的值（如 1000px），配合 overflow: hidden 实现高度展开动画；
- 移除 transform: translateY() 冲突：若同时使用 height/max-height 和 transform，可能因层叠上下文或渲染优先级导致动画不连贯；专注 opacity + max-height 组合更稳定；
- 保持文档流完整性：所有 .animated-text 保留默认 position: static，避免 absolute 破坏容器内自然流式布局与滚动检测。
对应 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-out;
}
.animated-text.active {
opacity: 1;
max-height: 1000px; /* 足够容纳任意内容高度 */
}⚠️ 注意事项与增强建议
-
性能优化：在真实项目中，务必添加 throttle 或 requestAnimationFrame 防抖，避免高频 scroll 触发重排：
let ticking = false; window.addEventListener('scroll', () => { if (!ticking) { requestAnimationFrame(() => { updateActiveHeading(); ticking = false; }); ticking = true; } }); - 首屏初始化：页面加载后立即执行一次 updateActiveHeading()，确保初始状态正确；
- 无障碍友好：为 .active 标题添加 aria-current="step" 属性，提升屏幕阅读器体验；
- 响应式适配：在小屏设备上可考虑降级为点击切换，或调整触发阈值（如改为 top >= stickyRect.top - 50 提前激活）。
通过将滚动判断逻辑锚定在 sticky 容器本身，并采用语义化、可过渡的 CSS 属性组合，即可稳健实现“滚动即激活、容器即舞台”的专业级文本动画效果——无需第三方库，纯原生 JavaScript 与 CSS 即可交付高性能、可维护的交互体验。
