невидимый navbar в начальной загрузке

Question

Во время прокрутки моя навигационная панель переходит из прозрачного в прозрачное.Вот ссылка :

Моя навигационная панель выглядит в начале так:

Я вижу, что у него светлая рамка и шрифт не белый.Но я хочу быть похожим на пример, который я показал выше.Не могли бы вы помочь мне сделать это?

Вот мой код:

<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>