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

Question

我使用了一个名为custom的辅助填充。css覆盖引导代码，我想知道如何创建一个只有当我的网站的访问者不在页面顶部时才激活的代码。

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

例子：https://www.lyft.com/

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

Answer 1

为了避免使用滚动、加载和调整大小事件对性能的影响，现在可以使用Intersection Observer API。

它将允许您检测页面上的内容是否被滚动，并相应地设置导航栏透明度（通过添加或删除类）。

请查看此答案以了解更多详细信息。

Answer 2

$(document).ready(function() {
    $(window).scroll(function() {
       if($(this).scrollTop() > height) { 
           $('.navbar').addClass('scrolled');
       } else {
           $('.navbar').removeClass('scrolled');
       }
    });
});

Answer 3

好的，您需要以下代码来实现这一效果：（我将使用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 */
}