Comment animer ou réduire une barre de navigation Bootstrap lors du défilement ?

Comment animer ou réduire une barre de navigation lors du défilement à l'aide de Bootstrap

La recherche d'une solution pour animer ou réduire une barre de navigation lors du défilement peut souvent conduire à des informations obsolètes, en particulier celles relatives à Bootstrap 3. Cet article se concentre sur les solutions actuelles pour Bootstrap 4 et 5.

Bootstrap 5

Bootstrap 5 conserve la classe sticky-top pour créer un effet de barre de navigation statique à fixe lors du défilement. Vous pouvez également utiliser JavaScript IntersectionObserver pour surveiller un élément « déclencheur » et appliquer une classe CSS à la barre de navigation lorsque le déclencheur devient visible. Cette classe peut alors contenir le CSS nécessaire pour ajuster l'apparence et la position de la barre de navigation.

Bootstrap 4

Comme Bootstrap 4 ne dispose pas du composant Affix, vous pouvez utiliser le sticky- classe supérieure pour apposer la barre de navigation lorsqu'elle atteint le sommet. Cependant, cette méthode à elle seule ne déclenchera pas d'événement JavaScript pour indiquer quand la barre de navigation est apposée. Par conséquent, vous aurez besoin de JavaScript pour manipuler le style de la barre de navigation une fois qu'elle deviendra collante. IntersectionObserver est une option appropriée pour détecter le moment où un élément déclencheur au-dessus de la barre de navigation atteint la fenêtre d'affichage et déclenche l'état "collant". en termes de fonctionnalités, vous pouvez également utiliser des plugins jQuery comme ScrollPos-Styler ou écrire votre propre script jQuery pour contrôler le style de la barre de navigation lors du défilement. Une approche consiste à définir une barre de navigation fixe avec data-toggle="affix" et à utiliser jQuery pour surveiller la position de défilement et basculer conditionnellement la classe .affix.

Ressources supplémentaires

[Barre de navigation supérieure collante - IntersectionObserver Démo](https://codepen.io/pdreier/pen/QWNYrrZ)

[Sticky Top Navbar - Démo jQuery](https://codeply.com/go/62Roy6RDOa)

[Plus de Bootstrap 4 Changer le style de la barre de navigation lors du défilement Exemples](https://wrapbootstrap.com/theme/change-navbar-style-on-scroll-bootstrap-147)

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!