Comment puis-je faire mon navbar changer la classe CSS lors du défilement au-delà d'un point d'ancrage?

J'utilise Bootstrap 3 et je souhaite réaliser cet effet lorsque l'utilisateur dépasse la grande image d'en-tête de ma page. J'ai besoin du fond de la barre de navigation pour passer de transparent à blanc. J'ai regardé dans leur code et je sais que c'est fait avec javascript, et même vu où il se passait, je pense (cherchez l'ID '# head-header' dans ce JS) …

Ne sachant pas que le Javascript est passé, je cherche un moyen d'appliquer cela à ma barre de navigation lorsque je dépasse un certain point. La classe de mon code s'appelle 'navbar' et j'aimerais 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!

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

Il est très simple de mettre en place, voici la documentation

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

Nous utiliserons JS pour vérifier la position de défilement de Windows sur chaque événement de défilement et le 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 parcouru #main, puis nous allons utiliser 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 ainsi que je l'ai fait ici . J'utilise également un certain étranglement de défilement et une sémantique de style un peu plus compliqué, mais c'est l'essentiel.

Vous pourriez probablement utiliser javascript element.scrollTop avec Jquery addClass et removeClass. Je ne l'ai pas encore essayé.

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?