Comment puis-je changer la couleur d'arrière-plan de ma barre de navigation lors du défilement ?

Changement de couleur dynamique de la barre de navigation lors du défilement

Améliorez l'expérience de navigation de votre site Web en transformant la couleur de la barre de navigation lorsque vous faites défiler la page . Dans cette question, l'utilisateur a demandé des conseils pour supprimer initialement la couleur d'arrière-plan de la barre de navigation, puis appliquer une couleur lors du défilement au-delà d'un div spécifique.

Solution :

La solution implique une combinaison de JavaScript et CSS. Tout d'abord, ajoutez le code JavaScript suivant à la section d'en-tête de votre document HTML :

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

Ce code JavaScript surveille la position de défilement de la fenêtre et active la classe "défilement" sur la barre de navigation lorsque le défilement dépasse la position de défilement. la hauteur de la barre.

Ensuite, ajoutez le code CSS suivant à votre feuille de style :

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

Ceci CSS garantit que lorsque la classe "défilement" est appliquée à la barre de navigation, sa couleur d'arrière-plan passe au blanc (#fff) avec une transition douce sur 200 millisecondes.

En implémentant cette solution, vous pouvez créer un barre de navigation dynamique qui améliore l'expérience utilisateur en fournissant un repère visuel lorsqu'il fait défiler le contenu de la page.

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!