• 时间:
  • 分类: 网站

如果希望导航菜单初始就固定在顶端，仅在“向下滚动第一段距离隐藏、再滚动一段距离重新固定显示”，只需微调代码（核心是给导航栏默认加 fixed-top 类，再调整滚动判断逻辑）。以下是基于 Bootstrap 5 的最终版代码，满足“始终置顶→滚动隐藏→再滚动恢复置顶”的需求：

核心逻辑调整

  1. 初始状态：导航栏固定在顶部（默认加 fixed-top）；
  2. 向下滚动「第一段距离（如200px）」：菜单隐藏；
  3. 继续向下滚动「第二段距离（如500px）」：菜单重新固定显示，且一直置顶；
  4. 向上滚动回到顶部：菜单恢复“固定置顶”状态（不再隐藏）。

完整代码（直接复制可用）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 5 固定顶端导航（滚动隐藏/恢复）</title>
  <!-- 引入Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    /* 页面高度模拟长内容 */
    body {
      height: 3000px;
      /* 初始给body加顶部内边距，避免固定导航遮挡内容 */
      padding-top: 70px; 
    }

    /* 导航栏基础样式：默认固定顶部 + 过渡动画 */
    .navbar {
      transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
      z-index: 1030; /* Bootstrap固定导航默认层级 */
    }

    /* 隐藏状态：向上滑出视野（保留fixed-top，仅视觉隐藏） */
    .navbar.hide {
      transform: translateY(-100%);
      opacity: 0;
    }
  </style>
</head>
<body>
  <!-- Bootstrap 5 导航栏：默认加fixed-top，固定在顶端 -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
    <div class="container">
      <a class="navbar-brand" href="#">Logo</a>
      <!-- 响应式折叠按钮 -->
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
      </button>
      <!-- 导航菜单 -->
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item"><a class="nav-link active" href="#">首页</a></li>
          <li class="nav-item"><a class="nav-link" href="#">产品</a></li>
          <li class="nav-item"><a class="nav-link" href="#">关于我们</a></li>
          <li class="nav-item"><a class="nav-link" href="#">联系我们</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- 页面内容示例 -->
  <div class="container mt-5">
    <h1>滚动页面测试导航栏效果</h1>
    <p>初始导航固定在顶端 → 向下滚动200px隐藏 → 滚动500px恢复置顶！</p>
  </div>

  <!-- 引入Bootstrap 5 JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    // 1. 获取导航栏元素
    const navbar = document.querySelector('.navbar');
    // 2. 定义滚动阈值（可自定义）
    const hideDistance = 200;  // 滚动200px开始隐藏
    const showDistance = 500;  // 滚动500px恢复显示
    // 3. 记录上次滚动位置（优化体验）
    let lastScrollTop = 0;

    // 4. 监听滚动事件
    window.addEventListener('scroll', function() {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      const isScrollDown = scrollTop > lastScrollTop; // 判断是否向下滚动

      // 核心逻辑：仅向下滚动时触发隐藏，向上滚动立即恢复
      if (isScrollDown) {
        if (scrollTop > hideDistance && scrollTop < showDistance) {
          // 向下滚动200-500px：隐藏导航（保留fixed-top，仅视觉隐藏）
          navbar.classList.add('hide');
        } else if (scrollTop >= showDistance) {
          // 向下滚动≥500px：恢复显示（移除hide类）
          navbar.classList.remove('hide');
        }
        // 滚动≤200px：默认显示（已加fixed-top，无需操作）
      } else {
        // 向上滚动：立即恢复显示，无论滚动距离
        navbar.classList.remove('hide');
      }

      lastScrollTop = scrollTop;
    });
  </script>
</body>
</html>

关键修改点（实现“始终置顶”）

  1. 默认加 fixed-top 类：
    导航栏标签直接加 fixed-top（Bootstrap 5 固定顶部类），初始就固定在顶端，无需额外 CSS。
  2. 隐藏逻辑调整：
    隐藏时仅加 .hide 类（视觉上向上滑出），保留 fixed-top 类，避免导航栏脱离固定布局；
    恢复显示时只需移除 .hide 类，导航栏立即回到顶端。
  3. 向上滚动强制显示：
    只要检测到“向上滚动”，无论当前滚动距离，都立即移除 .hide 类，保证用户向上滑动时能快速看到导航栏。

自定义调整指南

  1. 修改滚动阈值：

    • hideDistance = 200 → 向下滚动200px开始隐藏，可改为100/300px；
    • showDistance = 500 → 向下滚动500px恢复显示，可改为400/600px。

  2. 修改导航样式：

    • 改 bg-primary 为 bg-dark/bg-light 切换背景色；
    • 改 navbar-dark 为 navbar-light 适配浅色背景；
    • 加 shadow-sm 类给导航栏加阴影：<nav class="navbar ... shadow-sm">。

  3. 调整动画效果：
    若觉得隐藏/显示太生硬，可修改 transition 时长：

    .navbar {
  transition: transform 0.4s ease, opacity 0.4s ease; /* 放慢动画到0.4秒 */
}

最终效果

  • ✅ 初始状态：导航栏牢牢固定在页面顶端，不随滚动偏移；
  • ✅ 向下滚动 200-500px：导航栏向上滑出隐藏（但布局仍固定在顶端）；
  • ✅ 向下滚动 ≥500px：导航栏立即恢复显示，且一直置顶；
  • ✅ 向上滚动：无论滚动到哪，导航栏立即显示，保证操作便捷；
  • ✅ 移动端：折叠菜单正常展开，滚动逻辑不受影响。

这个方案完全贴合 Bootstrap 5 生态，仅需少量代码调整，就能实现“固定顶端+滚动隐藏+恢复显示”的核心需求！
(doubao)

标签: none