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

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

Problème :

Définition d'un arrière-plan transparent La couleur de la barre de navigation ne fonctionne pas lorsque la page défile, ce qui entraîne l'apparition d'une nouvelle couleur d'arrière-plan. appliqué.

Solution :

Pour modifier la couleur de la barre de navigation après le défilement, suivez ces étapes :

1. Ajoutez JavaScript au Tête :

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

2. Ajouter du CSS pour styliser la barre de navigation :

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

Implémentation :

Le code JavaScript surveille le défilement des pages. Une fois que le défilement dépasse la hauteur de la barre de navigation, il ajoute une classe nommée scrolled à la barre de navigation. Le code CSS stylise la barre de navigation avec une couleur d'arrière-plan blanche lorsque la classe défilée est présente. Cela fait passer la couleur d'arrière-plan en douceur sur 200 millisecondes.

Cette solution vous permet de définir une couleur d'arrière-plan transparente pour la barre de navigation lorsqu'elle ne défile pas et de changer la couleur d'arrière-plan en blanc lors du 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!