本文详解如何为页面头部导航栏添加双向平滑过渡动画：既在用户向下滚动时以 0.5 秒 ease-in-out 动画隐藏，也在向上滚动时同步实现流畅显现，避免因 css 类切换顺序不当导致的瞬时消失问题。
本文详解如何为页面头部导航栏添加双向平滑过渡动画：既在用户向下滚动时以 0.5 秒 ease-in-out 动画隐藏，也在向上滚动时同步实现流畅显现，避免因 css 类切换顺序不当导致的瞬时消失问题。
在现代网页交互设计中，「滚动感知型头部（Scroll-aware Header）」已成为提升用户体验的重要模式——它在用户向下滚动时自动收起以释放视口空间，向上滚动时又优雅浮现，确保关键导航始终可触达。然而，许多开发者会遇到一个典型问题：头部能平滑显现，却在隐藏时“啪”地一下消失，破坏视觉连贯性。其根本原因在于：header__top 类定义了 transition: top 0.5s ease-in-out，但当代码执行 removeClass('header__top').addClass('nav_up') 时，header__top 被立即移除，导致 transition 属性丢失，动画无法触发。
✅ 正确解法：保持 transition 属性持续生效
关键在于 确保 transition 始终由某个存在且未被移除的类所声明。最佳实践是：先添加目标状态类（如 nav_up），再在回调中移除源状态类（如 header__top），从而让浏览器在 DOM 更新前保留过渡样式上下文。
以下是优化后的完整 JavaScript 实现（兼容 jQuery 3.x）：
// 滚动感知头部动画控制
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（含 top: -120px），再移除 header__top（保留 transition）
$('header')
.addClass('nav_up')
.removeClass('header__top');
$('label').removeClass('menu__btn').addClass('nav_up');
} else {
// 向上滚动 → 显现：直接切换回 header__top（transition 已定义，自然生效）
if (st + $(window).height() < $(document).height()) {
$('header')
.removeClass('nav_up')
.addClass('header__top');
$('label').removeClass('nav_up').addClass('menu__btn');
}
}
lastScrollTop = st;
}? 对应 CSS 关键点说明
.header__top {
width: 100%;
height: 120px;
background-color: #000;
position: fixed;
top: 0;
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
box-shadow: rgba(0, 0, 0, 0.35) 0 5px 15px;
transition: top 0.5s ease-in-out; /* ✅ 过渡属性必须在此类中定义 */
}
.nav_up {
top: -120px; /* 精确匹配 header 高度，确保完全隐藏 */
}⚠️ 注意事项：
- transition 必须写在 .header__top 中（而非 .nav_up），因为它是唯一长期存在的基础类；.nav_up 仅控制终态位置。
- top: -120px 的值需严格等于
的实际高度（推荐用 JS 动态读取或 CSS --header-height 变量维护一致性）。 - 若使用 transform: translateY() 替代 top，性能更优（触发 GPU 加速），此时需将 transition 改为 transform 0.5s ease-in-out，并调整 .nav_up { transform: translateY(-120px); }。
- 当前逻辑未处理页面顶部/底部边界情况，生产环境建议增加 st
✅ 效果验证与调试建议
- 打开浏览器开发者工具 → Elements 面板，观察
的 class 切换过程：向下滚动时应短暂同时拥有 header__top nav_up，随后 header__top 被移除；向上滚动时则相反。 - 在 transition 属性后追加 will-change: top;（谨慎使用）可进一步提示浏览器优化渲染路径。
- 如需支持无 JS 回退，可结合 prefers-reduced-motion 媒体查询降级为无动画版本。
通过这一结构化实现，你将获得真正「双向平滑」的头部滚动体验——不仅符合用户直觉，更体现了对 CSS 渲染机制的深度理解。
