Ustaw przezroczystość paska nawigacyjnego Bootstrap na przewijanie

Question

Używam dodatkowego filla o nazwie custom.css, aby nadpisać kod bootstrap i chciałbym wiedzieć, jak utworzyć kod, który aktywuje się tylko wtedy, gdy użytkownik mojej witryny nie znajduje się na samym szczycie strony.

Do tej pory stworzyłem przezroczysty pasek nawigacyjny przy użyciu domyślnego kodu dostarczonego przez bootstrap. Jedyne, co muszę zrobić, to ustawić go tak, aby wykonywał: background-color: #color, gdy użytkownik przewija w dół.

Przykład: https://www.lyft.com/

Kiedy jestem w górnej części strony, navbar jest przezroczysta, ale kiedy przewinąć to staje się nieprzezroczysty.

Answer 1

OK, aby uzyskać ten efekt, potrzebujesz następującego kodu: (Mam zamiar użyć jQuery, ponieważ jest to język obsługiwany przez bootstrap).

---

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

Można również użyć ScrollSpy to zrobić.

---

a CSS (przykład):

/* 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 */ 
}