![](/img/trans.png)
[英]My nav bar color doesn't want to change with my jquery when I scroll?
[英]JQuery navigation menu doesn't change color when scroll
有誰知道為什么我向下滾動時導航欄不改變顏色; 這是導航欄:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
和:
<script>
$(document).ready(function(){
$("div").scroll(function() { // check if scroll event happened
if ($(document).scrollTop() > 50) { // check if user scrolled more than 50 from top of the browser window
$(".navbar-fixed-top").css("background-color", "#f8f8f8"); // if yes, then change the color of class "navbar-fixed-top" to white (#f8f8f8)
} else {
$(".navbar-fixed-top").css("background-color", "transparent"); // if not, change it back to transparent
}
});
});
不管我嘗試了什么都行不通
您需要將.scroll
附加到這樣的document
...
$(document).ready(function(){
$(document).scroll(function() { // check if scroll event happened
if ($(document).scrollTop() > 50) { // check if user scrolled more than 50 from top of the browser window
$(".navbar-fixed-top").css("background-color", "#f8f8f8"); // if yes, then change the color of class "navbar-fixed-top" to white (#f8f8f8)
} else {
$(".navbar-fixed-top").css("background-color", "transparent"); // if not, change it back to transparent
}
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.