Comment puis-je modifier dynamiquement la couleur de ma barre de navigation en fonction de la position de défilement ?

Couleur de la barre de navigation dynamique avec défilement

Dans votre projet, vous avez mentionné être confronté à un problème où la barre de navigation acquiert une couleur d'arrière-plan après un défilement vers le bas . Pour résoudre ce problème, nous pouvons implémenter une solution qui modifie la couleur de la barre de navigation en fonction de la position de défilement.

Implémentation JavaScript :

Pour y parvenir, ajoutez le code JavaScript suivant à l'en-tête de votre fichier HTML :

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

Ce script surveille en permanence la position de défilement. Lorsque la valeur du scrolltop dépasse la hauteur de la barre de navigation, elle ajoute une classe appelée « scrolled » à la barre de navigation, déclenchant le changement de couleur.

Style CSS :

Pour mettez à jour la couleur de la barre de navigation, créez une feuille de style et incluez le CSS suivant :

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

La valeur "#fff" peut être personnalisé selon votre couleur préférée. Lorsque la classe « défilée » est appliquée à la barre de navigation, sa couleur d'arrière-plan passera au blanc en douceur.

Exemple :

Pour illustrer la fonctionnalité, vous pouvez vous référer à le JsFiddle suivant :

[JsFiddle Link]

Cet exemple montre comment la barre de navigation tourne blanc après avoir fait défiler vers le bas. En mettant en œuvre cette solution, vous pouvez changer efficacement la couleur de votre barre de navigation de manière dynamique en fonction de la position de défilement.

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!