Bootstrap 3菜单导航栏随着向下滚动而更改颜色

debugcn 发表于 Dev

安妮

我试图使顶部菜单导航栏在他们打开主页时以及当他们开始向下滚动时都透明background color。

这是我的代码：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<body data-spy="scroll" data-target="#my-navbar">

  <!-- Navbar -->
  <nav class="navbar navbar-custom navbar-fixed-top top-nav-collapse" id="my-navbar" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>

        <a href="" class="navbar-brand">Health&Wellness</a>
      </div>
      <!-- Navbar Header-->

      <div class="collapse navbar-collapse" id="navbar-collapse">
        <ul class="nav navbar-nav">
          <li><a href="#health_product">Health Product</a>
          </li>
          <li><a href="#blog">Blog</a>
          </li>
          <li><a href="#slim_product">Slim Product</a>
          </li>
          <li><a href="#video">Video</a>
          </li>
          <li><a href="#skin_product">Skin Product</a>
          </li>
          <li><a href="#contact_us">Contact us</a>
          </li>
        </ul>
      </div>
    </div>
    <!-- End Container-->
  </nav>
  <!-- End navbar-->
</body>

迪帕斯

您将需要JS来做到这一点

$(window).scroll(function() {
  if ($(".navbar").offset().top > 50) {
    $(".navbar-fixed-top").addClass("top-nav-collapse");
  } else {
    $(".navbar-fixed-top").removeClass("top-nav-collapse");
  }
});

.navbar-custom.top-nav-collapse {
  background: black;
  padding: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<body data-spy="scroll" data-target="#my-navbar">

  <!-- Navbar -->
  <nav class="navbar navbar-custom navbar-fixed-top" id="my-navbar" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>

        <a href="" class="navbar-brand">Health&Wellness</a>
      </div>
      <!-- Navbar Header-->

      <div class="collapse navbar-collapse" id="navbar-collapse">
        <ul class="nav navbar-nav">
          <li><a href="#health_product">Health Product</a>
          </li>
          <li><a href="#blog">Blog</a>
          </li>
          <li><a href="#slim_product">Slim Product</a>
          </li>
          <li><a href="#video">Video</a>
          </li>
          <li><a href="#skin_product">Skin Product</a>
          </li>
          <li><a href="#contact_us">Contact us</a>
          </li>
        </ul>
      </div>
    </div>
    <!-- End Container-->
  </nav>
  <!-- End navbar-->
  <div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque commodo mollis ipsum, id scelerisque enim imperdiet vitae. Proin consectetur eleifend elit at ullamcorper. Vivamus ante purus, auctor sit amet viverra id, mattis sed enim. Aliquam bibendum dignissim odio quis pulvinar. Cras ultricies orci est. Pellentesque vitae tellus ante. Phasellus vitae lacus vitae diam euismod rhoncus nec nec risus. Donec sagittis vel sapien et suscipit. Quisque tempus justo id vulputate ultricies. Maecenas libero neque, efficitur volutpat aliquam dignissim, pellentesque non orci. Donec vulputate tincidunt tellus, feugiat eleifend ex molestie eu. Proin at odio et est suscipit ultrices quis id orci. Vestibulum ac hendrerit est. Ut ante nisi, vehicula a tristique et, ultricies vitae augue.

Proin in dolor a ex auctor posuere. Donec commodo ornare orci, eu tempus ante pulvinar non. Aenean mauris neque, malesuada sit amet mi in, cursus accumsan nisi. Duis ullamcorper gravida tortor, sit amet tempus ex imperdiet id. Pellentesque eget elit vel ex tempus luctus et id sapien. Fusce massa augue, pharetra vel dictum nec, lobortis eu neque. Nunc condimentum tempus imperdiet. Nullam in elit et dolor lobortis pretium vitae in odio. Nullam id ornare justo.

Proin eget varius est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla lectus elit, imperdiet id pulvinar a, ullamcorper id est. Nunc pharetra tincidunt ex, a luctus elit eleifend eget. Cras euismod gravida urna sed gravida. Morbi bibendum, nibh vitae rutrum finibus, est nibh tincidunt augue, eu dignissim neque enim iaculis urna. Ut quis tortor erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Quisque pharetra efficitur libero, eu tincidunt magna. In hac habitasse platea dictumst. Proin eget laoreet mi. Donec rutrum lectus sit amet leo faucibus tincidunt. Suspendisse potenti. Sed vehicula vitae leo nec cursus. In quam nibh, blandit at ante et, aliquet interdum lacus. Donec id varius libero, sollicitudin elementum orci. Suspendisse viverra suscipit ligula a suscipit.

Fusce sit amet metus gravida, mollis metus quis, consectetur erat. Aliquam rhoncus semper hendrerit. Vivamus vitae lectus diam. Suspendisse sit amet lacinia arcu. Donec tempus semper dolor eget lacinia. Cras eleifend aliquam accumsan. Duis nec nisi pellentesque, iaculis tortor eu, laoreet velit. Nam non diam semper, iaculis risus lobortis, tristique leo. Sed et elit non mi sollicitudin suscipit ut in tortor. </div>
</body>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。