スクロールバーのクリアバーからブラックバーにブートストラップナビバーを変更するにはどうすればよいですか？

Question

私は、スクロールを開始してから黒いバーが透明バーに置き換わるまで、ブートストラップのナビゲーションバーを透明にしたいプロジェクトに取り組んでいます。私はそこに類似のチュートリアルがあることを知っています。しかし、私が作ったものと一緒に仕事をしたい。しかし、私はそれを正しくターゲットする方法と、私が望む効果を得るために必要な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

ブートストラップでuはクラス.navbar逆行列を使用している場合、背景色を変更することはできません。 .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>