滚动时设置Bootstrap导航栏透明度

Question

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

到目前为止,我使用bootstrap提供的默认代码创建了一个透明的导航栏.我唯一要做的就是将其设置为执行:background-color: #color当访问者向下滚动时.

示例:https://www.lyft.com/

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

Answer 1

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