web-dev-qa-db-fra.com

Comment puis-je faire en sorte que ma barre de navigation modifie la classe CSS en faisant défiler un point d'ancrage?

J'utilise Bootstrap 3 et je veux obtenir cet effet lorsque l'utilisateur fait défiler la grande image d'en-tête sur ma page. J'ai besoin de l'arrière-plan de la barre de navigation pour aller du transparent au blanc. J'ai regardé dans leur code et je SAIS que c'est fait avec javascript, et j'ai même vu OÙ ça se passait je pense (chercher l'ID '# main-header' dans ce JS) ...

Ne connaissant pas le Javascript avancé, je cherche un moyen de l'appliquer à ma barre de navigation lors du défilement au-delà d'un certain point. La classe de mon code s'appelle 'navbar' et je voudrais qu'il devienne blanc quand il passe "#main". Faites-moi savoir si vous avez besoin de plus d'informations et merci d'avance si quelqu'un veut vous aider!

javascriptcsstwitter-bootstrapnavigationtwitter-bootstrap-3
12
katgarcia

Si vous utilisez Twitter Bootstrap cela peut être réalisé avec le 'Affix' plugin

C'est assez simple à configurer, voici la documentation

12
Daimz

La façon la plus simple d'accomplir ce que vous essayez de faire est une combinaison de transitions javascript simples (propulsées par jQuery dans ce cas) et CSS3.

Nous utiliserons JS pour vérifier la position de défilement de Windows sur chaque événement de défilement et la comparer à la distance du bas de l'élément #main - si la position de défilement est supérieure, nous appliquerons une classe au corps pour indiquer nous avons fait défiler #main, puis nous utiliserons CSS pour définir le style de navigation pour cet "état".

Donc, notre balisage de base:

<nav class="nav">
    <a href="#" class="logo">[logo]</a>
</nav>
<div id="main">#main</div>
<div id="below-main">#below-main</div>

Et notre javascript:

// get the value of the bottom of the #main element by adding the offset of that element plus its height, set it as a variable
var mainbottom = $('#main').offset().top + $('#main').height();

// on scroll, 
$(window).on('scroll',function(){

    // we round here to reduce a little workload
    var stop = Math.round($(window).scrollTop());

    if (stop > mainbottom) {
        $('.nav').addClass('past-main');
    } else {
        $('.nav').removeClass('past-main');
    }

});

Et, nos styles:

.nav {
    background-color:transparent;
    color:#fff;
    transition: all 0.25s ease;
    position:fixed;
    top:0;
    width:100%;
    background-color:#ccc;
    padding:1em 0;
    /* make sure to add vendor prefixes here */
}

.nav.past-main {
    background-color:#fff;
    color:#444;
}

#main {
  height:500px;
  background-color:red;
}

#below-main {
  height:1000px;
  background-color:#eee;
}

Un exemple de travail sur Codepen

C'est comme ça que je l'ai fait ici . J'utilise également une limitation de défilement et une sémantique de style un peu plus compliquée, mais c'est l'essentiel.

36
taylorleejones

Vous pourriez probablement utiliser javascript element.scrollTop avec Jquery addClass et removeClass. Je ne l'ai pas essayé moi-même.

Voici un lien de débordement pour obtenir la position de la barre de défilement: Comment obtenir la position de la barre de défilement avec Javascript?

1
user3047190