Bootstrap -Affix-Plugin (Fortgeschritten)

Das Affix-Plugin

Mit dem Affix-Plug-in kann ein Element an einem Bereich auf der Seite angebracht (gesperrt) werden. Dies wird häufig bei Navigationsmenüs oder Symbolschaltflächen für soziale Netzwerke verwendet, damit sie beim Hoch- und Herunterscrollen der Seite an einem bestimmten Bereich "kleben".

Das Plugin schaltet dieses Verhalten ein und aus (ändert den Wert von CSS positionvon staticzu fixed), je nach Bildlaufposition.

Beispiel 1) Eine angebrachte Navigationsleiste:

Beispiel 2) Eine angebrachte Seitenleiste:

Wenn wir mit Affix auf der Seite nach oben und unten scrollen, ist das Menü immer sichtbar und an seiner Position fixiert.

So erstellen Sie ein angehängtes Navigationsmenü

Das folgende Beispiel zeigt, wie Sie ein horizontal angebrachtes Navigationsmenü erstellen:

Das folgende Beispiel zeigt, wie Sie ein vertikal angebrachtes Navigationsmenü erstellen:

Beispiel erklärt

Fügen data-spy="affix"Sie dem Element hinzu, das Sie anbringen möchten.

Fügen Sie optional das data-offset-top|bottomAttribut hinzu, um die Position der Schriftrolle zu berechnen.

Wie es funktioniert

Das Affix-Plugin schaltet zwischen drei Klassen um: .affix, .affix-top, und .affix-bottom. Jede Klasse repräsentiert einen bestimmten Zustand. Sie müssen CSS-Eigenschaften hinzufügen, um die tatsächlichen Positionen zu handhaben, mit Ausnahme von position:fixed in der .affixKlasse.

• Das Plugin fügt die Klasse .affix-topor hinzu .affix-bottom, um anzuzeigen, dass sich das Element an seiner obersten oder untersten Position befindet. Eine Positionierung mit CSS ist an dieser Stelle nicht erforderlich.


• Das Scrollen über das angehängte Element hinaus löst das eigentliche Anbringen aus - Hier ersetzt das Plugin die Klasse .affix-topor .affix-bottomdurch die .affixKlasse (sets position:fixed). An dieser Stelle müssen Sie das CSS topoder die bottomEigenschaft hinzufügen, um das angehängte Element auf der Seite zu positionieren.


• Wenn ein unterer Versatz definiert ist, wird beim Scrollen darüber hinaus die .affixKlasse durch ersetzt .affix-bottom. Da Offsets optional sind, müssen Sie zum Festlegen eines Offsets das entsprechende CSS festlegen. Fügen Sie in diesem Fall position:absolutebei Bedarf hinzu.

Im ersten obigen Beispiel fügt das Affix-Plugin die .affixKlasse (position:fixed) zum <nav>-Element hinzu, wenn wir 197 Pixel von oben gescrollt haben. Wenn Sie das Beispiel öffnen, sehen Sie auch, dass wir die CSS - topEigenschaft mit dem Wert 0 zur .affixKlasse hinzugefügt haben. Dadurch soll sichergestellt werden, dass die Navigationsleiste immer oben auf der Seite bleibt, wenn wir 197 Pixel vom oberen Rand gescrollt haben.

Scrollspy & Affix

Verwendung des Affix-Plugins zusammen mit dem Scrollspy- Plugin:

Vollständige Bootstrap-Affix-Referenz

Eine vollständige Referenz aller Affix-Methoden und -Ereignisse finden Sie in unserer Bootstrap JS-Affix-Referenz .