通过监听滚动事件并结合定时器，可在用户停止滚动5秒后自动隐藏导航栏；当用户再次滚动时重置计时，确保导航栏及时显示，兼顾可用性与界面简洁性。
要实现“滚动停止5秒后自动隐藏导航栏”的交互效果，核心思路是：利用 setTimeout 启动延迟隐藏，同时在每次滚动时清除并重置该定时器。这比单纯依赖滚动方向判断更精准，尤其适用于您当前已支持“上滑显示、下滑隐藏”的增强场景。
以下是完整、可直接集成的优化方案（兼容您原有逻辑）：
/* CSS 样式建议 */
.navbar {
position: sticky;
top: 0;
z-index: 1000;
transition: transform 0.3s ease-in-out;
/* 初始状态：显示 */
}
.navbar.hidden {
transform: translateY(-100%);
}
/* 可选：添加淡出效果 */
.navbar.hidden {
opacity: 0;
}
// JavaScript（融合原逻辑 + 停止滚动自动隐藏）
const nav = document.querySelector("nav");
const navHeight = 70;
let lastScrollY = 0;
const delta = 10;
let hideTimer = null;
// 隐藏导航栏（带过渡）
function hideNavbar() {
nav.classList.add("hidden");
}
// 显示导航栏
function showNavbar() {
nav.classList.remove("hidden");
}
// 重置并启动5秒自动隐藏计时器
function resetHideTimer() {
if (hideTimer) clearTimeout(hideTimer);
hideTimer = setTimeout(hideNavbar, 5000);
}
// 滚动处理主逻辑（保留您原有的方向感知）
function handleScroll() {
const sy = window.scrollY;
if (Math.abs(lastScrollY - sy) > delta) {
if (sy > lastScrollY && sy > navHeight) {
// 向下滚动 → 隐藏
hideNavbar();
resetHideTimer(); // 立即重置计时器（防止误触发）
} else if (sy < lastScrollY) {
// 向上滚动 → 显示，并重置计时器
showNavbar();
resetHideTimer();
}
lastScrollY = sy;
}
}
// 滚动节流（推荐使用 requestAnimationFrame 替代 setInterval，更高效）
let ticking = false;
window.addEventListener("scroll", () => {
if (!ticking) {
requestAnimationFrame(() => {
handleScroll();
ticking = false;
});
ticking = true;
}
});
// 页面加载后立即显示导航栏，并启动初始计时器
document.addEventListener("DOMContentLoaded", () => {
showNavbar();
resetHideTimer(); // 用户未滚动时，5秒后也隐藏（可选）
});
✅ 关键说明与注意事项：
- resetHideTimer() 是核心：每次有效滚动（含向上/向下）都会清除旧定时器并新建一个5秒倒计时，确保“停止即隐藏”逻辑严格生效；
- 使用 requestAnimationFrame 替代 setInterval 节流，性能更优、响应更平滑；
- .hidden 类采用 transform: translateY(-100%) 实现无布局位移的隐藏，避免页面抖动；
- 若需保留原有 .nav-up 类逻辑，可将其与 .hidden 合并控制，或通过 CSS :not(.nav-up) 辅助判断；
- 初始加载后调用 resetHideTimer() 可实现“页面静止5秒后自动隐藏”，如需禁用此行为，删除该行即可。
该方案轻量、健壮，无缝衔接您的现有代码，同时显著提升用户体验——既响应快速滚动，又尊重用户的阅读节奏。