上滾動

Question

設置引導導航欄透明度我使用一個名爲custom.css二次並祝覆蓋引導代碼，我想知道如何創建一個只激活代碼時，我的網站的訪客是不是在最頂端的頁面。

直到現在我創建使用由自舉提供的默認代碼的透明導航欄。我唯一要做的就是設置它執行：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 */ 
}