html - 如何修复白色背景。试图制作透明的导航栏

Question

我想使用 bootstrap4 做一个带有透明导航栏的全页登陆。当您向下滚动时，我想要一个固定在顶部的导航栏。

当我使用类“fixed-top”时，它看起来不错，但在您向下滚动时没有跟随。当我使用“sticky-top”时，它会使导航栏的背景变为白色。

<nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top">
    <div class="container-fluid">
         <a href="#" class="navbar-brand">Brand</a>
         <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarToggler-1" aria-controls="navbarToggler-1" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
         </button>

.bg-dark{
    background-color: transparent !important;
}

Answer 1

我是这样做的

html

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

CSS

.navbar-fixed {
  top: 0;
  z-index: 100;
  position: fixed;
  width: 100%;
}
.navbar{
  background-color: transparent !important;
}

js

$(window).scroll(function () {
  console.log($(window).scrollTop())
  if ($(window).scrollTop() > 63) {
    $('.navbar').addClass('navbar-fixed');
  }
  if ($(window).scrollTop() < 64) {
    $('.navbar').removeClass('navbar-fixed');
  }
});

希望能帮到你