Wie animiere oder verkleinere ich eine Bootstrap-Navigationsleiste beim Scrollen?

So animieren oder verkleinern Sie eine Navigationsleiste beim Scrollen mit Bootstrap

Die Suche nach einer Lösung zum Animieren oder Verkleinern einer Navigationsleiste beim Scrollen kann oft fehlschlagen auf veraltete Informationen, insbesondere zu Bootstrap 3. Dieser Artikel konzentriert sich auf aktuelle Lösungen für Bootstrap 4 und 5.

Bootstrap 5

Bootstrap 5 behält die Sticky-Top-Klasse bei, um einen statischen zu festen Navigationsleisteneffekt beim Scrollen zu erzeugen. Alternativ können Sie JavaScript IntersectionObserver verwenden, um ein „Trigger“-Element zu überwachen und eine CSS-Klasse auf die Navigationsleiste anzuwenden, wenn der Trigger sichtbar wird. Diese Klasse kann dann das notwendige CSS enthalten, um das Erscheinungsbild und die Position der Navigationsleiste anzupassen.

Bootstrap 4

Da Bootstrap 4 die Affix-Komponente fehlt, können Sie die Sticky- Erstklassig, um die Navigationsleiste anzubringen, wenn sie oben angekommen ist. Diese Methode allein löst jedoch kein JavaScript-Ereignis aus, das anzeigt, wann die Navigationsleiste aktiviert ist. Daher benötigen Sie JavaScript, um den Stil der Navigationsleiste zu ändern, sobald diese einfriert. IntersectionObserver ist eine geeignete Option, um zu erkennen, wann ein Triggerelement über der Navigationsleiste das Ansichtsfenster erreicht und den „Sticky“-Zustand auslöst.

jQuery-Alternativen

Neben der Verwendung von Bootstraps integriertem Was die Funktionalität betrifft, können Sie auch jQuery-Plugins wie ScrollPos-Styler verwenden oder Ihr eigenes jQuery-Skript schreiben, um den Stil der Navigationsleiste zu steuern scrollen. Ein Ansatz besteht darin, eine Navigationsleiste mit fester Oberseite mit data-toggle="affix" zu definieren und jQuery zu verwenden, um die Bildlaufposition zu überwachen und die .affix-Klasse bedingt umzuschalten.

Zusätzliche Ressourcen

• [Sticky Top Navbar – IntersectionObserver Demo](https://codepen.io/pdreier/pen/QWNYrrZ)
• [Sticky Top Navbar – jQuery-Demo](https://codeply.com/go/62Roy6RDOa)
• [Mehr Bootstrap 4 Navbar-Stil beim Scrollen ändern Beispiele](https://wrapbootstrap.com/theme/change-navbar-style-on-scroll-bootstrap-147)

Das obige ist der detaillierte Inhalt vonWie animiere oder verkleinere ich eine Bootstrap-Navigationsleiste beim Scrollen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!