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

【问题标题】：Set Bootstrap navbar transparency on scroll在滚动时设置 Bootstrap 导航栏透明度
【发布时间】：2015-06-21 04:49:40
【问题描述】：

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

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

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

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

【问题讨论】：

欢迎来到 SO！ :)到目前为止，您尝试了什么？你可以发布你的代码吗？我相信 Lyft 使用 javascript 来实现这种效果。
我复制了 .navbar-default 的原始引导程序（如果您需要，我可以提供给您）并修改了颜色。在 HTML 中，我将栏设置为顶部固定（使用 navbar-fixed-top）。除了寻找可能有帮助的东西之外，我没有做任何其他事情......我会研究 lyft，也许我会找到一些有用的东西。编辑：当我使用“查看 lyft”时，我的意思是查看他们的 css。
Lyft 使用 angular-js 并在用户滚动到页面下方的某个点时将 .opaque 类添加到导航栏。
谢谢！我会研究它并尝试学习如何使用它:)

标签： css twitter-bootstrap navbar

【解决方案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 */
}

【讨论】：

我无法启动它。我想是因为酒吧已经固定在顶部。我将修改脚本以观看另一堂课。我认为这将解决问题。
在 Blazor 项目中使用 Bootstrap 4 并且运行顺利

【解决方案2】：

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

【讨论】：

您能否详细说明这是如何解决问题的？您的代码可能是正确的，但您需要附有很好的解释。

【解决方案3】：

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

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

查看answer 了解更多详情。

【讨论】：