如何將自舉導航欄從清晰的欄更改爲滾動條上的黑欄？

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>