CSS transition 无法在 sticky 元素动态获得粘性状态时触发高度变化，根本原因是初始高度为 auto，而 CSS 过渡要求起始和结束值均为可计算的具体数值（如 px、em），本文提供稳定可靠的修复方案。
css `transition` 无法在 sticky 元素动态获得粘性状态时触发高度变化，根本原因是初始高度为 `auto`，而 css 过渡要求起始和结束值均为可计算的具体数值（如 px、em），本文提供稳定可靠的修复方案。
在实现“滚动吸顶 + 平滑高度过渡”效果时，开发者常误以为只要为 .contents 设置 transition: height 3s 并通过 JavaScript 切换 .stuck 类即可生效。但实际运行中，高度动画完全缺失——这是因为 position: sticky 元素的默认 height: auto 无法参与 CSS 过渡。浏览器无法对 auto 值进行插值计算，导致过渡被静默忽略。
✅ 正确解法：固化初始高度为具体像素值
关键在于：必须为元素显式设置一个确定的初始 height（单位为 px/em/% 等可动画值），而非依赖 auto。最佳实践是利用 JavaScript 在 DOM 渲染后立即读取并固化当前计算高度：
const content = document.querySelector('.contents');
const initialPos = content.offsetTop;
// ? 关键一步：获取并设置初始高度（避免 auto）
content.style.height = content.clientHeight + 'px';
window.addEventListener('scroll', () => {
// 使用 toggle 更简洁，语义清晰
content.classList.toggle('stuck', content.offsetTop > initialPos);
});对应 CSS 需同步调整：
.contents {
margin-top: 50px;
border: 1px solid black;
position: sticky;
top: 0;
transition: height 3s ease, background-color 3s ease; /* 可追加其他可动画属性 */
}
.stuck {
height: 100px !important; /* !important 确保覆盖内联 height */
background-color: green;
}⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- !important 在 .stuck 中是必要的：因 JS 设置的是内联样式（style.height），其优先级高于普通 CSS 类，不加 !important 将导致高度无法被覆盖；
- 推荐同时为 background-color 等视觉属性添加 transition，保证整体动效一致性；
- 若内容高度可能随响应式或字体加载变化，应在 window.resize 或字体就绪后重新校准 clientHeight；
- 避免对 top、position 等非连续属性做过渡（它们本身不可动画），专注 height、opacity、transform、background-color 等支持硬件加速的属性。
✅ 进阶优化：使用 getComputedStyle 提升健壮性（可选）
若需兼容更复杂布局（如 padding/margin 影响），可改用 getComputedStyle 获取包含盒模型的精确高度：
const computed = getComputedStyle(content); content.style.height = computed.height; // 返回如 "124.5px"
但多数场景下 clientHeight 已足够准确且性能更优。
通过固化初始高度 + 合理使用 !important + 完整的 transition 属性声明，即可让 sticky 元素在吸顶瞬间实现自然、可控的高度过渡动画，兼顾用户体验与代码可维护性。
