本文详解如何为滚动时自动隐藏与显示的固定头部（header）添加统一的 0.5 秒 ease-in-out 过渡动画，解决“消失瞬间闪退、出现却有动画”的不一致问题。
本文详解如何为滚动时自动隐藏与显示的固定头部（header）添加统一的 0.5 秒 ease-in-out 过渡动画，解决“消失瞬间闪退、出现却有动画”的不一致问题。
在现代网页交互设计中，具备滚动感知能力的「智能头部」（sticky header）已成标配：用户向下滚动时头部平滑收起以腾出更多内容空间，向上滚动时再优雅浮现。然而，许多开发者会遇到一个典型问题——仅 addClass 触发的进入动画生效，而 removeClass 导致的退出动画却失效，造成“消失即刻消失、出现缓缓滑入”的视觉割裂。
根本原因在于：CSS 过渡（transition）必须作用于同一元素在两个连续状态间的变化过程。当代码执行 $('header').removeClass('header__top').addClass('nav_up') 时，.header__top 类被立即移除，其定义的 transition: top 0.5s ease-in-out 也随之失效；此时 .nav_up 虽设置了 top: -120px，但因过渡属性已丢失，浏览器直接跳转目标值，导致无动画。
✅ 正确解法是：确保过渡样式始终保留在元素上，即让 .nav_up 类也继承或声明相同的 transition 属性，并通过「先加新类、后删旧类」的顺序，使过渡在类切换过程中持续生效。
以下是优化后的完整实现方案：
✅ 推荐写法：CSS 侧统一声明过渡，JS 侧保证类切换原子性
/* 关键改进：将 transition 提升至 nav_up 类，或使用通用过渡规则 */
.header__top,
.nav_up {
width: 100%;
height: 120px;
background-color: #000;
position: fixed;
z-index: 5;
border-bottom: 0.02rem solid #000;
display: flex;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
transition: top 0.5s ease-in-out; /* ✅ 过渡声明在此处统一生效 */
}
.header__top {
top: 0;
}
.nav_up {
top: -120px;
}// ✅ 优化后的 JavaScript（关键：避免同时 remove/add 破坏过渡链）
var didScroll;
var lastScrollTop = 0;
var delta = 10;
var navbarHeight = $('header').outerHeight();
$(window).scroll(function () {
didScroll = true;
});
setInterval(function () {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = $(this).scrollTop();
if (Math.abs(lastScrollTop - st) <= delta) return;
if (st > lastScrollTop && st > navbarHeight) {
// ✅ 正确顺序：先添加 nav_up（启用 transition），再移除 header__top（保留 transition 生效）
$('header').addClass('nav_up').removeClass('header__top');
$('label').removeClass('menu__btn').addClass('nav_up');
} else {
// 向上滚动时恢复：先加 header__top，再删 nav_up
if (st + $(window).height() < $(document).height()) {
$('header').addClass('header__top').removeClass('nav_up');
$('label').removeClass('nav_up').addClass('menu__btn');
}
}
lastScrollTop = st;
}⚠️ 注意事项：
- 不要使用 addClass(..., function(){}) 回调方式（如原答案所示）：jQuery 的 addClass(className, callback) 并非标准 API（该语法实际不存在），属错误用法，会导致 JS 报错或行为不可控；
- 务必确保 transition 属性在两个状态类中均存在，或通过共同父选择器统一声明（如示例中的 .header__top, .nav_up）；
- 若需更精细控制（如不同方向过渡曲线），可分别设置 transition-property 和 transition-timing-function，但本场景统一 ease-in-out 即可保障自然感；
- 建议为 header 添加 will-change: top（生产环境酌情启用），提示浏览器提前优化渲染性能。
最终效果：无论用户向下滚动隐藏头部，还是向上滚动唤回头部，都将获得完全对称、流畅连贯的 0.5 秒滑动过渡，显著提升界面专业度与用户体验一致性。
