web-dev-qa-db-fra.com

Définir la transparence de la barre de navigation Bootstrap sur le défilement

J'utilise une fille secondaire appelée custom.css pour écraser le code d'amorçage et j'aimerais savoir comment créer un code qui s'active uniquement lorsque le visiteur de mon site n'est pas tout en haut de la page.

Jusqu'à présent, j'ai créé une barre de navigation transparente en utilisant le code par défaut fourni par bootstrap. La seule chose à faire est de le configurer pour qu'il exécute: background-color: #color lorsque le visiteur fait défiler l'écran vers le bas.

Exemple: https://www.lyft.com/

Lorsque je suis en haut de la page, la barre de navigation est transparente, mais lorsque je fais défiler l'écran, elle devient opaque.

csstwitter-bootstrapnavbar
10
Hiperkie

Ok, vous avez besoin du code suivant pour obtenir cet effet: (Je vais utiliser jQuery car c'est la langue prise en charge par le 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();
    });
}

Vous pouvez également utiliser ScrollSpy pour le faire.

et votre CSS (exemple):

/* 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 */
}
31
David Passmore
$(document).ready(function() {
    $(window).scroll(function() {
       if($(this).scrollTop() > height) { 
           $('.navbar').addClass('scrolled');
       } else {
           $('.navbar').removeClass('scrolled');
       }
    });
});
0
saad