如何实现用户停止滚动5秒后自动隐藏NavBar？

你只需要添加一个定时器变量来管理自动隐藏的延迟逻辑，以下是修改后的完整代码：

const nav = document.querySelector("nav");
const navHeight = 70;
let lastScrollY = 0;
const delta = 10;
// 新增：存储自动隐藏的定时器
let hideNavTimer;

function scrolled() {
  let sy = window.scrollY;
  if (Math.abs(lastScrollY - sy) > delta) {
    // 滚动向下 -> 隐藏导航栏，同时清除定时器
    if (sy > lastScrollY && sy > navHeight) {
      nav.classList.add("nav-up");
      clearTimeout(hideNavTimer);
    } 
    // 滚动向上 -> 显示导航栏，启动5秒后自动隐藏的定时器
    else if (sy < lastScrollY) {
      nav.classList.remove("nav-up");
      // 先清除之前的定时器，避免重复触发
      clearTimeout(hideNavTimer);
      hideNavTimer = setTimeout(() => {
        nav.classList.add("nav-up");
      }, 5000);
    }
    lastScrollY = sy;
  }
}

let didScroll = false;
window.addEventListener("scroll", function(e){
  didScroll = true;
  // 新增：每次滚动时清除定时器，重置计时
  clearTimeout(hideNavTimer);
});

setInterval(function() {
  if (didScroll) {
    scrolled();
    didScroll = false;
  }
}, 250);

关键修改说明： #

• 新增hideNavTimer变量，用来保存自动隐藏的定时器ID，方便后续清除。
• 向上滚动显示NavBar时，先清除之前的定时器（防止多次滚动导致多个定时器叠加），再设置新的5秒定时器，时间到后添加nav-up类隐藏导航栏。
• 在滚动事件触发时，立即清除定时器——只要用户还在滚动，就重置自动隐藏的计时，确保只有完全停止滚动5秒后才会隐藏。
• 向下滚动隐藏NavBar时，也清除定时器，避免已经触发的隐藏逻辑干扰当前状态。

内容的提问来源于stack exchange，提问作者Warood Khalid