在滚动上设置Bootstrap导航栏透明度 [英] Set Bootstrap navbar transparency on scroll

问题描述

我使用一个名为custom.css的辅助文件来覆盖引导代码，我想知道如何创建一个代码，只有当我的网站的访问者不在页面的顶部。 p>

到目前为止，我使用bootstrap提供的默认代码创建了一个透明导航栏。我只需要设置它执行： background-color：#color 当访问者向下滚动时。

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

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

解决方案

p> Ok您需要以下代码才能实现此效果：（我将使用jQuery，因为它是引导程序支持的语言）。

---

jQuery：

  / ** 
 *听滚动更改标题opacity class 
 * / 
 function checkScroll（）{
 var startY = $（'。navbar'）。height（）* 2; // navbar改变的点px 
 
 if（$（window）.scrollTop（）> startY）{
 $（'。navbar'）。addClass ）; 
} else {
 $（'。navbar'）。removeClass（scrolled）; 
} 
} 
 
 if（$（'。navbar'）。length> 0）{
 $（window）.on（scroll load resize ，function（）{
 checkScroll（）; 
}）; 
} 
  

您也可以使用 ScrollSpy



$ b b

  //添加以下转换以允许类似于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 
} 
  




I use a secondary fille called custom.css to overwrite the bootstrap code and I would like to know how to create a code that is activating only when the visitor of my site is not in the very top of the page.

Until now I created a transparent navbar using the default code provided by bootstrap. The only thing I have to do is to set it to execute: background-color: #color when the visitor is scrolling down.

Example: https://www.lyft.com/

When I am in the top of the page, the navbar is transparent, but when I scroll down it becomes opaque.

解决方案

Ok you need the following code to achieve this effect: (I am going to use jQuery as it is the bootstrap supported language).

---

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();
    });
}

You can also use ScrollSpy to do this.

---

and your CSS (example):

//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导航栏透明度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！