jquery - 如何将 Bootstrap 导航栏从透明栏更改为滚动时的黑色栏？

Question

我正在开发一个元素，我希望 Bootstrap 导航栏显示为透明，直到您开始滚动，然后黑色栏将取代透明栏。我知道那里有类似的教程。但我想和我开始创造的那个一起工作。但是，我只是不确定如何正确定位它，以及需要哪些 css 属性才能达到我想要的效果。提前致谢!

抱歉已修复。希望滚动时从透明条变为黑色条。

https://jsfiddle.net/qbhx8jke/

HTML:

 <nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
        <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-   toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">JO Project</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="#part1">Part 1</a></li>
        <li><a href="#part2">Part 2</a></li>
        <li><a href="#part3">Part 3</a></li>
        <li><a href="#part4">Part 4</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>

Jquery:

<script>
$(document).ready(function(){
$(window).scroll(function(){
    if($(window).scrollTop() > $(window).height()){
        $(".navbar").css({"background-color":"transparent"});   
    }
})

})

Answer 1

在 Bootstrap 中，如果您使用类 .navbar-inverse ，则无法更改背景颜色。所以使用.navbar-default。尝试使用以下代码可能会有所帮助

$(document).ready(function(){
$(window).scroll(function(){
    if($(window).scrollTop() > $(window).height()){
        $(".navbar").css({"background-color":"black"});   
      $(".navbar-default").css({"background-color":"black;","border-color":"black"})
    }
});
});

.navbar{
  background-color: transparent;
  }
.navbar-default {
    background-color: transparent;
    border-color: transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>
  
<div class="container">
  <h3>Basic Navbar Example</h3>
  <p>A navigation bar is a navigation header that is placed at the top of the page.</p>
</div>