Comment changer dynamiquement la couleur de la barre de navigation lors du défilement ?

Changement de couleur dynamique de la barre de navigation pendant le défilement

Obtenir une barre de navigation sans couleur d'arrière-plan au départ et changer progressivement sa couleur après le défilement nécessite une combinaison de JavaScript et CSS modifications.

JavaScript :

$(function () {
  $(document).scroll(function () {
    var $nav = $(".navbar-fixed-top");
    $nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
  });
});

Ce code vérifie la position de défilement vertical du document. S'il dépasse la hauteur de la barre de navigation, il fait basculer une classe "défilée" vers l'élément de la barre de navigation.

CSS :

.navbar-fixed-top.scrolled {
  background-color: #fff !important;
  transition: background-color 200ms linear;
}

Ce code CSS définit l'apparence de la barre de navigation avec la classe "scrolled". Il applique une couleur de fond blanche et un effet de transition fluide tout en changeant la couleur.

Mise en œuvre :

En ajoutant le code JavaScript fourni à l'en-tête de votre document HTML et le code CSS à votre feuille de style, vous pouvez facilement implémenter ce changement de couleur dynamique de la barre de navigation. Lorsque l'utilisateur fait défiler la page vers le bas, la barre de navigation passe progressivement à la couleur d'arrière-plan souhaitée.

Référence :

Pour une démonstration en direct, reportez-vous au JSFiddle suivant : [JSFiddle](https://jsfiddle.net/qe9L725y/).

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!