Imposta trasparenza barra di navigazione Bootstrap sullo scorrimento

Question

Io uso un file secondario chiamato custom.css per sovrascrivere il codice di bootstrap e vorrei sapere come creare un codice che si attiva solo quando il visitatore del mio sito non è in cima della pagina.

Fino ad ora ho creato una barra di navigazione trasparente utilizzando il codice predefinito fornito da bootstrap. L'unica cosa che devo fare è impostarla per l'esecuzione: background-color: #color quando il visitatore sta scorrendo verso il basso.

Esempio: https://www.lyft.com/

Quando sono nella parte superiore della pagina, la barra di navigazione è trasparente, ma quando ho scorrere verso il basso diventa opaca.

Answer 1

Ok, per ottenere questo effetto è necessario il seguente codice: (Userò jQuery poiché è il linguaggio supportato da 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(); 
    }); 
} 

È inoltre possibile utilizzare ScrollSpy per fare questo.

---

e il CSS (esempio):

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