Bootstrap4双导航滚动样式方案合理性及优化咨询

先直接给你三个核心问题的答案：

• 代码能不能用？作为新手练手作品能跑出效果已经不错，但放到正式站点用还有不少明显bug，不算合格的可上线代码
• 双独立导航的写法可行吗？临时做demo凑效果没问题，但非常不推荐长期用——导航链接写了两份，后续加菜单、改跳转地址要同步改两处，很容易漏改出问题，平白增加维护成本
• 有没有单导航+JS控制的更优方案？有，实现起来比你现在的双导航方案代码量更少，还能完美规避IE不支持position:sticky的问题，维护起来也方便

你当前代码存在的具体问题 #

1. 样式逻辑有冲突：CSS里给#navbar2设的初始隐藏值是top: -450px，但JS滚动回顶部时设置的是top: -50px，两个值不统一，首次加载如果页面不在顶部很容易出现导航露边的bug
2. 响应式断点不统一：Bootstrap4的navbar-expand-md对应的断点是768px，但你自己写的媒体查询断点是600px，会导致600px-767px这个宽度区间里，汉堡按钮被隐藏、桌面端导航又没展开的显示错误
3. CSS语法错误：媒体查询的注释没按规范写，开头漏了/*，会导致部分样式直接失效
4. 滚动监听性能差：直接给window.onscroll绑定事件，每次滚动都会无差别触发函数，页面内容长了很容易出现滚动掉帧
5. 内容遮挡问题：移动端给导航设了position:fixed但没给页面主体加对应高度的顶部内边距，页面顶部的内容会被导航挡住
6. 冗余代码太多：第二个导航的链接和第一个完全重复，没有复用价值

单导航实现的优化方案 #

核心思路非常简单：只保留一个Bootstrap原生导航栏，滚动时通过JS给导航加一个状态类，所有样式变化全靠CSS控制，不用写两套导航结构。

HTML 代码 #

<!-- 只保留这一个导航即可，删掉原来的navbar2结构 -->
<nav class="navbar navbar-expand-md main-nav" id="mainNav">
  <!-- Brand/logo -->
  <a class="navbar-brand" href="#">Navbar</a>

  <!-- 移动端汉堡按钮 -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>

  <!-- 导航链接 -->
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav text-center">
      <li class="nav-item">
        <a class="nav-link" href="#home">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#news">News</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#contact">Contact</a>
      </li>
    </ul>
  </div>
</nav>

JS 代码 #

const nav = document.getElementById('mainNav');
const scrollThreshold = 120; // 滚动超过120px切换导航样式
let ticking = false;

function updateNavStatus() {
  if (window.scrollY > scrollThreshold) {
    nav.classList.add('nav-scrolled');
  } else {
    nav.classList.remove('nav-scrolled');
  }
  ticking = false;
}

// 加节流优化，避免滚动时频繁触发函数卡顿
window.addEventListener('scroll', () => {
  if (!ticking) {
    window.requestAnimationFrame(updateNavStatus);
    ticking = true;
  }
});

CSS 代码 #

/* 基础导航默认样式 */
.main-nav {
  background-color: #000;
  transition: all 0.3s ease;
  width: 100%;
  top: 0;
  z-index: 1030;
}
.main-nav .navbar-brand,
.main-nav .nav-link {
  color: #fff;
  transition: all 0.3s ease;
}
.navbar-toggler {
  background-color: green;
}

/* 桌面端滚动后的导航样式 */
@media (min-width: 768px) {
  .main-nav {
    position: absolute;
  }
  .main-nav.nav-scrolled {
    position: fixed;
    background-color: #333;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  }
  /* 滚动后隐藏logo */
  .main-nav.nav-scrolled .navbar-brand {
    opacity: 0;
    visibility: hidden;
    width: 0;
    padding: 0;
    margin: 0;
  }
  body {
    padding-top: 0;
  }
}

/* 移动端样式 */
@media (max-width: 767.98px) {
  .main-nav {
    position: fixed;
    background-color: #000;
  }
  /* 移动端始终显示logo */
  .main-nav .navbar-brand {
    opacity: 1 !important;
    visibility: visible !important;
    width: auto !important;
    padding: 0.5rem 0 !important;
    margin-right: 1rem !important;
  }
  /* 给主体加顶部内边距，避免内容被导航遮挡 */
  body {
    padding-top: 56px;
  }
}

这个方案所有属性都兼容IE，导航结构只需要维护一份，后续改样式、加菜单都只需要改一处，性能也比直接绑滚动事件改内联样式好很多。

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