导航栏仅在滚动后显示

时间：2019-10-29 11:11:50

标签： html css

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

On opening this picture shows up

On scrolling down navbar becomes visible

这是我的一些有关navbar的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>

1 个答案:

答案 0 :(得分：0)

您可以使用此代码

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

相关问题
最新问题