Bootstrap 导航栏固定顶部

Question

我有一个网站，它的顶部固定有一个导航栏，它在滚动时会向下跟踪。此功能通过 Bootstrap 可以正常工作，并且应该保持不变。我需要在导航栏上方添加一个固定的 50px 容器，该容器不会与导航栏一起跟踪。当我尝试实现它时，导航栏要么覆盖它，要么跟踪容器。

<header>
  <nav class="navbar navbar-nav navbar-dark bg-alumni navbar-expand-md fixed-top nav-fill">
  <div class="container">
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
   </button>
   <a class="nav-link nav-item navbar-brand nav-justified" href="beta.html#">
    <img src="images/AlumniHallName_solo.svg" class="d-inline-block float-lg-left float-md-left" id="nav-logo">
   </a>
   <div class="collapse navbar-collapse justify-content-end col-lg-4 col-md-6" id="navbarNav">
     <a class="nav-link nav-item link" href="beta.html">About</a>
     <a class="nav-link nav-item link" href="faith.html">Faith</a>
     <a class="nav-link nav-item link" href="sports.html">Sports</a>
     <a class="nav-link nav-item link" href="pups.html">Pups</a>
   </div>
  </div>
  </nav>
</header>

Answer 1

这是我能想到的。它使用 jQuery 将导航栏动态更改为固定。您可以使用console.log 测试何时切换到固定导航菜单。我将在这里发布一些代码，但我建议查看我的代码笔here。

$(function() {
  $(window).scroll(function() {

    //use this number to determine when to switch to fixed menu
    console.log($(window).scrollTop())

    if ($(window).scrollTop() > 55) $('#navbar').addClass('navbarFixed');

    if ($(window).scrollTop() < 56) $('#navbar').removeClass('navbarFixed');

  });
});

.banner {
  height: 50px;
  width: 100%;
  background-color: red;
}

#navbar {
  border: 0;
  background-color: #4080ff;
  border-radius: 0px;
  margin-bottom: 0;
  height: 30px;
}

.navbarFixed {
  top: 0;
  position: fixed;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="banner">Hello, Alec!</div>
<div id="navbar">
  <a>About</a>
  <a>Faith</a>
  <a>Sports</a>
  <a>Pups</a>
</div>