Bootstrap 5.3导航栏滚动后导航项垂直居中问题解决

问题描述 #

导航栏初始为透明状态，页面滚动超过100px时切换为白色背景，但此时导航项无法垂直居中。

关键修复点 #

1. 给导航栏添加垂直对齐类，确保子元素自动居中
2. 修复JS未定义导航元素的错误
3. 明确自定义文字颜色类的样式，避免与Bootstrap默认样式冲突

修复后的完整代码 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

<style>
/* 自定义初始透明导航样式 */
.navbar-text-white {
  background-color: transparent !important;
}
.navbar-text-white .navbar-brand,
.navbar-text-white .nav-link {
  color: white !important;
}
.navbar-text-black .navbar-brand,
.navbar-text-black .nav-link {
  color: #000 !important;
}
</style>

<nav class="navbar fixed-top navbar-expand-lg p-md-3 navbar-text-white d-flex align-items-center">
  <div class="container">
    <a class="navbar-brand" href="#">Web Zone</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">
      <div class="mx-auto"></div>
      <ul class="navbar-nav justify-content-center">
        <li class="nav-item">
          <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Blog</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<!-- 测试滚动的占位内容 -->
<div style="height: 1500px; background: linear-gradient(to bottom, #1a1a2e, #ffffff);"></div>

<script>
const nav = document.querySelector('.navbar');

window.addEventListener('scroll', function () {
  if (window.pageYOffset > 100) {
    nav.classList.remove("navbar-text-white");
    nav.classList.add('bg-light', 'shadow', 'navbar-text-black');
  } else {
    nav.classList.add("navbar-text-white");
    nav.classList.remove('bg-light', 'shadow', 'navbar-text-black');
  }
});
</script>

你可以将上述完整代码复制到CodePen平台的HTML编辑器中，直接运行验证滚动时导航栏的居中效果。

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