上一篇: 根据CSS中的计数器值设置边距(缩... 下一篇:css – 并排divs

css – 设置Bootstrap导航栏的透明度滚动

CSS 发布时间：2022-04-17 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了css – 设置Bootstrap导航栏的透明度滚动，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

直到现在,我使用引导提供的默认代码创建了一个透明导航栏.我唯一需要做的是设置它执行：BACkground-color：#color当访问者滚动下来.

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

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

解决方法

好的,你需要以下代码来实现这个效果：(我将使用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.78); //NON-IE
}