html - 导航栏仅在滚动后显示

Question

我已经为这个简单的页面编写了 css 和 html。但是每当我打开页面时，它都不会显示导航栏，但在向下滚动时它会开始显示导航栏。我无法找出造成这种情况的可能原因，因为有 css 属性表示导航栏将保持透明。我正在使用 Bootstrap 4

这是我的一些导航栏的CSS代码

#mainNav {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  background-color: rgb(93, 93, 93) !important;
  transition: background-color 0.2s ease;
}

#mainNav .navbar-brand {
  font-family: "Merriweather Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 700;
  color: #000000 !important;
}

#mainNav .navbar-nav .nav-item .nav-link {
  color: #6c757d;
  font-family: "Merriweather Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.75rem 0;
}

#mainNav .navbar-nav .nav-item .nav-link:hover, #mainNav .navbar-nav .nav-item .nav-link:active {
  color: #0f1010 !important;
}

#mainNav .navbar-nav .nav-item .nav-link.active {
  color: #0f1010 !important;
}

@media (min-width: 992px) {
  #mainNav {
    box-shadow: none;
    background-color: #0f1010 !important;
  }
  #mainNav .navbar-brand {
    color: rgba(82, 82, 82, 0.7) !important;
  }
  #mainNav .navbar-brand:hover {
    color: #000000 !important;
  }
  #mainNav .navbar-nav .nav-item .nav-link {
    color: rgba(36, 36, 36, 0.7) !important;
    padding: 0 1rem;
  }
  #mainNav .navbar-nav .nav-item .nav-link:hover {
    color: #000000 !important;
  }
  #mainNav .navbar-nav .nav-item:last-child .nav-link {
    padding-right: 0;
  }
  #mainNav.navbar-scrolled {
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    background-color: #fff;
  }
  #mainNav.navbar-scrolled .navbar-brand {
    color: #212529;
  }
  #mainNav.navbar-scrolled .navbar-brand:hover {
    color: #f4623a;
  }
  #mainNav.navbar-scrolled .navbar-nav .nav-item .nav-link {
    color: #212529;
  }
  #mainNav.navbar-scrolled .navbar-nav .nav-item .nav-link:hover {
    color: #f4623a;
  }
}

.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

.container-fluid {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-dark fixed-top py-3" id="mainNav">
    <div class="container">
      <a class="navbar-brand js-scroll-trigger" href="#page-top">Volunteer</a>
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto my-2 my-lg-0">
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#about">Explore Events</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#services">How it works</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#portfolio">Locations</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#contact">Blog</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="#contact">Login</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

Answer 1

您可以使用此代码

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <title>Demo</title>
  <style type="text/css">
    body {
      margin: 0;
      background-color: #f1f1f1;
      font-family: Arial, Helvetica, sans-serif;
    }
    
    #navbar {
      background-color: #333;
      position: fixed;
      top: -62px;
      width: 100%;
      display: block;
      transition: top 0.3s;
    }
    
    #navbar a {
      float: left;
      display: block;
      color: #f2f2f2;
      text-align: center;
      padding: 15px;
      text-decoration: none;
      font-size: 17px;
    }
    
    #navbar a:hover {
      background-color: #ddd;
      color: black;
    }
    
    ul {
      margin: 0;
      float: right;
    }
    
    ul li {
      margin: 0;
      padding: 0;
      list-style-type: none;
      display: inline-block;
    }
  </style>
</head>

<body>
  <div id="navbar">
    <div class="container">
      <a class="navbar-brand js-scroll-trigger" href="#page-top">Volunteer</a>
      <ul>
        <li class="nav-item">
          <a class="nav-link js-scroll-trigger" href="#about">Explore Events</a>
        </li>
        <li class="nav-item">
          <a class="nav-link js-scroll-trigger" href="#services">How it works</a>
        </li>
        <li class="nav-item">
          <a class="nav-link js-scroll-trigger" href="#portfolio">Locations</a>
        </li>
        <li class="nav-item">
          <a class="nav-link js-scroll-trigger" href="#contact">Blog</a>
        </li>
        <li class="nav-item">
          <a class="nav-link js-scroll-trigger" href="#contact">Login</a>
        </li>
      </ul>
    </div>
  </div>
  <div style="padding:15px 15px 2500px;font-size:30px">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis lectus ullamcorper feugiat tristique. Sed fermentum libero dignissim, congue ex quis, tristique velit. Curabitur placerat finibus odio, vitae malesuada metus feugiat sit amet.
      Etiam feugiat ligula nisi, sed blandit libero sollicitudin vel. Sed molestie scelerisque orci, ut elementum neque pretium id. Quisque leo lorem, laoreet sit amet pharetra vulputate, aliquam nec est. Praesent in mauris ut odio maximus feugiat. Donec
      quis volutpat metus, eu commodo arcu. Aenean odio ipsum, sagittis in magna in, dictum suscipit mi. Donec rhoncus a risus at rutrum. Morbi eu purus tellus. Pellentesque eget tellus ac nulla porta scelerisque. Donec ut velit nulla. Vivamus semper
      vel enim sed iaculis. Quisque ut elementum urna. Mauris pellentesque erat vel magna volutpat vulputate. Aliquam erat volutpat. Nullam luctus nulla risus, sed faucibus odio tristique a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
      aliquam magna at libero cursus, eu feugiat leo ornare. Etiam pellentesque libero vitae mollis tempor. Donec lacinia, orci nec venenatis vulputate, diam leo auctor magna, ac tempus sem purus a libero.</p>
  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <script type="text/javascript">
    // When the user scrolls down 20px from the top of the document, slide down the navbar
    window.onscroll = function() {
      scrollFunction()
    };

    function scrollFunction() {
      if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        document.getElementById("navbar").style.top = "0";
      } else {
        document.getElementById("navbar").style.top = "-62px";
      }
    }
  </script>
</body>

</html>