Jeu de Bootstrap barre de navigation de la transparence sur le défilement

Je utiliser un deuxième fille appelle la coutume.css pour remplacer le code de démarrage et je voudrais savoir comment créer un code qui est activé uniquement lorsque le visiteur de mon site n'est pas dans le très haut de la page.

Jusqu'à maintenant, j'ai créé un transparent barre de navigation en utilisant le code par défaut fournis par bootstrap. La seule chose que j'ai à faire est de le mettre à exécution: background-color: #color lorsque le visiteur est un défilement vers le bas.

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

Quand je suis en haut de la page, la barre de navigation est transparent, mais quand je scroll vers le bas, il devient opaque.

Bienvenue DONC! :) Ce que vous avez essayé jusqu'à présent? Vous pouvez poster votre code? Lyft utilise javascript pour arriver à cet effet, je crois.
J'ai copié l'original de bootstrap .navbar-valeur par défaut (si vous en avez besoin, je peux les fournir à vous) et j'ai modifié les couleurs. En HTML, j'ai mis la barre haut fixe (à l'aide de navbar-fixed-top). Je n'ai rien fait d'autre, sauf à chercher quelque chose qui pourrait vous aider... je vais regarder dans lyft, maybee je vais trouver quelque chose d'utile. EDIT: quand j'ai utilisé "regarde lyft" je voulais dire à la recherche dans leur css.
Lyft utilise angular-js et ajoute de la classe .opaque de la barre de navigation une fois que l'utilisateur fait défiler jusqu'à un certain point bas de la page.
Merci!!!! Je vais regarder et essayer d'apprendre comment l'utiliser 🙂

OriginalL'auteur Hiperkie | 2015-04-15

  1. 30

    Ok, vous devez le code suivant pour obtenir cet effet: (je vais utiliser jQuery comme c'est le bootstrap de langue pris en charge).

    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 ce 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 */
}
    Je n'étais pas capable de le faire démarrer. Je pense que parce que la barre est déjà fixé sur le dessus. Je vais modifier le script pour regarder une autre classe. Je pense que cela va résoudre le problème.
    J'ai trouvé! Merci beaucoup!
    Vous êtes les bienvenus
    merci David, exactement ce que je cherchais!

    OriginalL'auteur David Passmore