时间戳

首页 > 解决方案 > 引导程序中的不可见导航栏

css - 引导程序中的不可见导航栏

问题描述

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

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

invisible_navbar

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

我的导航

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

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

<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');
    }
  });

标签： csshtmltwitter-bootstrapbootstrap-4

解决方案

您应该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>

推荐阅读