如何在Bootstrap中创建并调整滚动前后样式不同的时尚导航栏？

没问题！要实现这种滚动前后样式切换的Bootstrap导航栏，其实只需要结合Bootstrap的基础组件加一点简单的JS监听就行，我给你一步步拆解，完全能实现你图片里的效果：

1. 搭建基础HTML结构 #

先写Bootstrap导航栏的核心代码，给导航栏加一个自定义类navbar-custom，方便后续针对性修改样式：

<nav class="navbar navbar-expand-lg navbar-dark fixed-top navbar-custom">
  <div class="container">
    <a class="navbar-brand" href="#">你的品牌名称</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <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" aria-current="page" 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>

这里用fixed-top让导航栏固定在页面顶部，是实现滚动切换效果的前提。

2. 定义两种状态的CSS样式 #

我们需要给导航栏设置初始未滚动状态和滚动后状态的样式，比如初始时透明背景，滚动后变成深色带阴影的样式，完全可以匹配你图片里的效果：

/* 初始未滚动状态 */
.navbar-custom {
  background-color: transparent;
  transition: all 0.3s ease; /* 加上过渡动画，切换样式更平滑自然 */
}

/* 滚动后的状态 */
.navbar-custom.scrolled {
  background-color: #1a252f; /* 换成你想要的深色背景色 */
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.15); /* 可选：添加阴影增强立体感 */
}

/* 可选：调整导航链接的颜色适配两种状态 */
.navbar-custom .nav-link {
  color: #ffffff;
}

.navbar-custom.scrolled .nav-link {
  color: #f8f9fa;
}

3. 添加JavaScript监听滚动事件 #

用JS监听页面滚动动作，当滚动距离超过设定值（比如50px）时，给导航栏添加scrolled类，触发滚动后的样式；滚动回到顶部时移除该类，恢复初始样式：

// 监听页面滚动事件
window.addEventListener('scroll', function() {
  const navbar = document.querySelector('.navbar-custom');
  // 当滚动距离超过50px时切换样式，数值可以根据需求调整
  if (window.scrollY > 50) {
    navbar.classList.add('scrolled');
  } else {
    navbar.classList.remove('scrolled');
  }
});

如果你习惯用jQuery，也可以用更简洁的写法：

$(window).scroll(function() {
  $('.navbar-custom').toggleClass('scrolled', $(this).scrollTop() > 50);
});

小提示 #

• 确保你已经正确引入了Bootstrap的CSS和JS文件（记得带上Popper.js，Bootstrap的交互组件依赖它）
• 所有样式数值都可以自定义，比如背景色、滚动触发的阈值、动画时长，完全可以按照你图片里的效果微调
• 如果导航栏初始状态需要半透明，只需要把background-color改成rgba(0,0,0,0.3)这种半透明值就行

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