Question

滚动时我的导航栏从透明变为不透明。

我正在做一个我正在尝试做类似的事情。这是link：

我的导航栏看起来像这样：

我可以看到它的边框很浅并且字体不是白色。但我想像上面显示的示例一样。你能帮我做吗？

到目前为止，这是我的代码：

<nav class="navbar navbar-inverse navbar-expand-lg navbar-dark fixed-top shadow-lg">
  <div class="container">
      <a class="navbar-brand" href="#">
          <img src="" class="d-inline-block align-top" alt="">
          </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
          aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavDropdown">
          <ul class="navbar-nav ml-auto">
              <li class="nav-item active">
                  <a class="nav-link p-2 text-dark" href="/">Lorem <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item">
                  <a class="nav-link p-2 text-dark" href="/uns">Lorem <span
                          class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle p-2 text-dark" href="#" id="navbarDropdownMenuLink"
                      role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      Produkte
                  </a>
                  <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                      <a class="dropdown-item" href="#winkelstufe">Lorem</a>
                      <a class="dropdown-item" href="#auftritt">Lorem</a>
                      <a class="dropdown-item" href="#volltritt">Lorem</a>
                  </div>
              </li>
              <li class="nav-item">
                  <a class="nav-link p-2 text-dark" href="/galerie">Lorem</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link p-2 text-dark" href="/jobs">Lorem</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link p-2 text-dark" href="#contact2">Lorem</a>
              </li>
          </ul>
      </div>
  </div>

我的CSS：

nav.navbar{
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.navbar-inverse {
   /* background-color: #222;
   border-color: #080808; */
}

nav.navbar.transparent {
 background-color:white;
}

.navbar {
  background: transparent;
  font-size: 1rem;
}

我的js：

$(window).scroll(function() {
    if ($(document).scrollTop() > 50) {
      $('nav').addClass('transparent');
    } else {
      $('nav').removeClass('transparent');
    }
  });

Answer 1

您应该从导航栏中删除shadow-lg，只需要在滚动后应用该类即可；将其声明为内联将始终应用阴影。

也要注意文字颜色；您的导航上有navbar-dark，这将导致文本为白色；只需确保在添加.transparent类时更改此样式即可。

$(window).scroll(function() {
  if ($(document).scrollTop() > 50) {
    $('nav').addClass('transparent');
  } else {
    $('nav').removeClass('transparent');
  }
});

body {
  background-color: grey !important;
}

nav.navbar {
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

.nav-item .nav-link {
  color: white;
}

.navbar-inverse {
  /* background-color: #222;
   border-color: #080808; */
}

nav.navbar.transparent {
  background-color: white;
  box-shadow: 0px 0px 25px #000;
}

nav.navbar.transparent .nav-link {
  color: black;
}

.navbar {
  background: transparent;
  font-size: 1rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-expand fixed-top">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="" class="d-inline-block align-top" alt="">
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
      </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link p-2" href="/">Lorem <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link p-2" href="/uns">Lorem <span
                          class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle p-2" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      Produkte
                  </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" href="#winkelstufe">Lorem</a>
            <a class="dropdown-item" href="#auftritt">Lorem</a>
            <a class="dropdown-item" href="#volltritt">Lorem</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link p-2" href="/galerie">Lorem</a>
        </li>
        <li class="nav-item">
          <a class="nav-link p-2" href="/jobs">Lorem</a>
        </li>
        <li class="nav-item">
          <a class="nav-link p-2" href="#contact2">Lorem</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<p class="mt-5">
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maiores illum provident iure doloribus autem veniam aperiam nam atque iste quia, magni sapiente, sunt, culpa minima et nostrum dolor eveniet? Saepe velit corporis quaerat laudantium esse cumque
  nobis in. Dolores accusamus laudantium non neque veniam cupiditate labore corrupti voluptatibus quo cumque repellendus fugit doloribus, recusandae maiores accusantium omnis aut tempore. Reprehenderit neque officiis deleniti laudantium reiciendis recusandae,
  adipisci, dolores officia at dolorem a. Non consectetur alias velit modi aspernatur voluptatem nesciunt optio enim. Reiciendis nemo odio, commodi eos iure minima ullam nulla dicta dolorum aspernatur. Iusto animi quasi molestias? Repellendus, illum,
  amet, aliquam suscipit dolor voluptates facilis libero odio hic eos neque magni esse soluta quam adipisci. Eligendi explicabo similique recusandae ipsum praesentium excepturi enim, placeat eum libero! Tempore labore officia optio accusantium fugiat
  voluptate maxime expedita, dolores perferendis eos numquam delectus at odit cupiditate atque corporis rem reprehenderit consequatur velit.</p>
<p>
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maiores illum provident iure doloribus autem veniam aperiam nam atque iste quia, magni sapiente, sunt, culpa minima et nostrum dolor eveniet? Saepe velit corporis quaerat laudantium esse cumque
  nobis in. Dolores accusamus laudantium non neque veniam cupiditate labore corrupti voluptatibus quo cumque repellendus fugit doloribus, recusandae maiores accusantium omnis aut tempore. Reprehenderit neque officiis deleniti laudantium reiciendis recusandae,
  adipisci, dolores officia at dolorem a. Non consectetur alias velit modi aspernatur voluptatem nesciunt optio enim. Reiciendis nemo odio, commodi eos iure minima ullam nulla dicta dolorum aspernatur. Iusto animi quasi molestias? Repellendus, illum,
  amet, aliquam suscipit dolor voluptates facilis libero odio hic eos neque magni esse soluta quam adipisci. Eligendi explicabo similique recusandae ipsum praesentium excepturi enim, placeat eum libero! Tempore labore officia optio accusantium fugiat
  voluptate maxime expedita, dolores perferendis eos numquam delectus at odit cupiditate atque corporis rem reprehenderit consequatur velit.</p>
<p>
  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maiores illum provident iure doloribus autem veniam aperiam nam atque iste quia, magni sapiente, sunt, culpa minima et nostrum dolor eveniet? Saepe velit corporis quaerat laudantium esse cumque
  nobis in. Dolores accusamus laudantium non neque veniam cupiditate labore corrupti voluptatibus quo cumque repellendus fugit doloribus, recusandae maiores accusantium omnis aut tempore. Reprehenderit neque officiis deleniti laudantium reiciendis recusandae,
  adipisci, dolores officia at dolorem a. Non consectetur alias velit modi aspernatur voluptatem nesciunt optio enim. Reiciendis nemo odio, commodi eos iure minima ullam nulla dicta dolorum aspernatur. Iusto animi quasi molestias? Repellendus, illum,
  amet, aliquam suscipit dolor voluptates facilis libero odio hic eos neque magni esse soluta quam adipisci. Eligendi explicabo similique recusandae ipsum praesentium excepturi enim, placeat eum libero! Tempore labore officia optio accusantium fugiat
  voluptate maxime expedita, dolores perferendis eos numquam delectus at odit cupiditate atque corporis rem reprehenderit consequatur velit.</p>

引导中的隐形导航栏

1 个答案: