css导航栏设置透明度,在滚动上设置Bootstrap导航栏透明度

小编典典

好的，您需要以下代码来实现此效果：(我将使用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, 0, 0.78); /* NON-IE */

}

2020-05-16