bootstrap中的隐形导航栏

问题描述 投票：-1回答：1

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

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

invisible_navbar

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

my_nav

我可以看到它有一个浅色边框，字体不是白色。但我想在上面展示的例子中表现得像。你能帮帮我吗？

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

<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');
    }
  });
css html5 twitter-bootstrap bootstrap-4
1个回答
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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.