如何在Bootstrap中增加向下滚动时Navbar隐藏的过渡延迟

Bootstrap 5原生没有自带滚动隐藏Navbar的功能，你用到的navbar-hide-on-scroll属于自定义实现。要调整隐藏速度和延迟，需要从CSS过渡动画和滚动事件触发逻辑两方面入手：

1. 设置自定义过渡动画（控制隐藏速度） #

给Navbar添加CSS过渡属性，控制显示/隐藏时的动画时长：

.navbar {
  /* 自定义过渡时长，比如0.5秒，数值越大动画越慢 */
  transition: transform 0.5s ease-in-out;
}

/* 隐藏Navbar的样式，通过 translateY 移出视口 */
.navbar-hidden {
  transform: translateY(-100%);
}

2. 调整滚动触发延迟（避免快速滚动误触发） #

通过JS监听滚动事件，添加延迟判断，确保滚动停止后再执行隐藏操作：

let lastScrollTop = 0;
const navbar = document.querySelector('.navbar');

window.addEventListener('scroll', function() {
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  
  // 清除之前的延迟定时器，避免重复触发
  clearTimeout(this.scrollTimeout);
  // 设置延迟时长，单位为毫秒（示例为300ms）
  this.scrollTimeout = setTimeout(() => {
    // 向下滚动且滚动距离超过100px时隐藏Navbar
    if (scrollTop > lastScrollTop && scrollTop > 100) {
      navbar.classList.add('navbar-hidden');
    } else {
      // 向上滚动时显示Navbar
      navbar.classList.remove('navbar-hidden');
    }
    lastScrollTop = scrollTop;
  }, 300);
});

完整代码整合 #

替换你原来的代码，整合后的完整代码如下：

CSS #

.spacer {
  height: 125vh;
}

.navbar {
  transition: transform 0.5s ease-in-out;
}

.navbar-hidden {
  transform: translateY(-100%);
}

HTML & JS #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand ps-5 fs-4" href="#">Abdullah Asif</a>
    <ul class="navbar-nav ms-auto mb-2 mb-lg-0 pe-5 fw-bold fs-4">
      <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Home</a></li>
      <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">Work</a></li>
      <li class="nav-item"><a class="nav-link active" aria-current="page" href="#">About</a></li>
    </ul>
  </div>
</nav>

<div class="spacer"></div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>

<script>
let lastScrollTop = 0;
const navbar = document.querySelector('.navbar');

window.addEventListener('scroll', function() {
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  
  clearTimeout(this.scrollTimeout);
  this.scrollTimeout = setTimeout(() => {
    if (scrollTop > lastScrollTop && scrollTop > 100) {
      navbar.classList.add('navbar-hidden');
    } else {
      navbar.classList.remove('navbar-hidden');
    }
    lastScrollTop = scrollTop;
  }, 300);
});
</script>

可调整参数 #

• 过渡速度：修改CSS中transition的0.5s为你需要的时长（如1s表示1秒完成动画）。
• 滚动延迟：修改JS中setTimeout的300为你需要的延迟毫秒数（如500表示滚动停止后0.5秒再隐藏）。

内容的提问来源于stack exchange，提问作者Abdullah Asif