[英]Change Navbar Color on scroll
我的導航欄無法更改滾動顏色,我已經在使用此腳本。 請幫我
<script>
$(document).ready(function(){
$(window).scroll(function() {
if ($(document).scrollTop() > 50) {
$(".navbar-fixed-top").css("background-color", "#f8f8f8");
} else {
$(".navbar-fixed-top").css("background-color", "transparent");
}
});
});
</script>
我正在使用引導程序
希望這行得通,您必須使用scrollTop()
來獲取vertical scrollbar position
並相應地在選定的div中進行更改,即,此處是.navbar
。
$(document).ready(function(){ $(window).on("scroll",function(){ var wn = $(window).scrollTop(); if(wn > 120){ $(".navbar").css("background","rgba(255,0,0,1)"); } else{ $(".navbar").css("background","rgba(1,1,1,1)"); } }); });
body{ height:1600px; } .navbar{ background:rgba(1,1,1,1); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <nav class="navbar 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>
我很好奇為什么您不使用引導程序附帶的詞綴? 這是鏈接: http : //www.w3schools.com/Bootstrap/bootstrap_affix.asp
在您的情況下,請為您的nav標簽添加此行
<nav class="navbar navbar-fixed-top"data-spy="affix" data-offset-top="(scroll value)" >
和CSS
.affix.navbar{
background-color: color-you-prefer;
}
對顏色使用css class
:
.anycolor {
background-color: #f8f8f8";
}
並使用此代碼執行此操作:
if ($(window).scrollTop() > 50){
$('.navigation').addClass( "anycolor");
}
else {
$('.navigation').removeClass("anycolor");
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.