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

我使用一个名为custom.css的辅助填充来覆盖引导程序代码,我想知道如何创建仅在网站访问者不在页面顶部时才激活的代码。

到目前为止,我使用引导程序提供的默认代码创建了一个透明的导航栏。我唯一要做的就是将其设置为执行:`background-color:

color`当访客向下滚动时。

当我在页面顶部时,导航栏是透明的,但是当我向下滚动时,它变得不透明。

回答:

好的,您需要以下代码来实现此效果:(我将使用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 */

}

以上是 在滚动上设置Bootstrap导航栏透明度 的全部内容, 来源链接: utcz.com/qa/429713.html

回到顶部