好的,你需要以下代码来实现这个效果:(我将使用jQuery,因为它是引导支持的语言).
jQuery的:
/**
* Listen to scroll to change header opacity class
*/
function checkScroll(){
var startY = $('.navbar').height() * 2; //The point where the navbar changes in px
if($(window).scrollTop() > startY){
$('.navbar').addClass("scrolled");
}else{
$('.navbar').removeClass("scrolled");
}
}
if($('.navbar').length > 0){
$(window).on("scroll load resize",function(){
checkScroll();
});
}
您也可以使用ScrollSpy来执行此操作.
和你的CSS(示例):
//Add the below transitions to allow a smooth color change similar to lyft
.navbar {
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
transition: all 0.6s ease-out;
}
.navbar.scrolled {
background: rgb(68,68,68); //IE
background: rgba(0,0.78); //NON-IE
}