如何将自举导航栏从清晰的栏更改为滚动条上的黑栏？

我正在研究一个项目，我希望引导程序导航栏显示为透明，直到您开始滚动，然后黑色栏将替换透明栏。我知道那里有类似的教程。但我想与我开始创建的那个合作。但是，我只是不确定如何正确定位它，以及我需要的效果的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"}); 
    } 
})

}）

来源

2016-12-15 dancemc15

$（ “导航栏 ”）。removeClass（“ 导航栏逆”）。在jquery 和$（“。navbar”）.css（“background-color”，“transparent”）中的.css之前添加此行。 –

[在滚动上设置Bootstrap导航栏透明度]的可能重复（http://stackoverflow.com/questions/29646622/set-bootstrap-navbar-transparency-on-scroll） – vanburen

在自举如果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>

来源

2016-12-15 05:47:35

对不起。我刚刚编辑了我的问题。我正在将导航栏设置为透明，然后滚动到黑色。 – dancemc15

现在尝试使用上述代码 –

感谢您帮助我修复我的代码。但是，在开始滚动之前，默认导航栏是白色的，而不是背景图片的颜色（因此不完全透明）。你有什么想法，为什么？ – dancemc15

如何将自举导航栏从清晰的栏更改为滚动条上的黑栏？

回答

相关问题