Bootstrap Affix Plugin (Advanced)

Das Affix Plugin

Das Affix-Plugin ermöglicht es ein Element fixiert (gesperrt) werden zu einem Bereich auf der Seite. Dies ist oft mit Navigationsmenüs oder sozialen Symbol - Tasten verwendet werden, um sie zu machen "stick" zu einem bestimmten Bereich , während Scrollen nach oben und unten auf der Seite.

Das Plugin schaltet das Verhalten ein- und ausschalten (ändert sich der Wert von CSS Position von den statischen zu fest), auf Scroll - Position abhängig.

Beispiel 1) ein aufgeklebtes navbar:

Beispiel 2) ein aufgeklebtes Sidebar:

Mit Affix, wenn wir nach oben und unten auf der Seite, das Menü ist immer sichtbar und in seiner Position verriegelt.

Wie ein aufgeklebtes Navigationsmenü erstellen

Das folgende Beispiel zeigt, wie eine horizontal angebrachte Navigationsmenü zu erstellen:

Das folgende Beispiel zeigt, wie eine vertikale befestigt Navigationsmenü zu erstellen:

Beispiel erklärt

In data-spy="affix" auf das Element , das Sie daran befestigten wollen.

Fügen Sie optional die data-offset-top|bottom Attribut die Position der Schriftrolle zu berechnen.

Wie es funktioniert

Das Affix - Plugin schaltet zwischen drei Klassen: .affix , .affix-top und .affix-bottom . Jede Klasse stellt einen bestimmten Zustand. Sie müssen CSS - Eigenschaften fügen Sie die aktuellen Positionen zu handhaben , mit Ausnahme der position:fixed auf der .affix Klasse.

• Das Plugin fügt die .affix-top oder .affix-bottom Klasse das Element , um anzuzeigen , ist in seiner am weitesten oben oder untersten Position. Positionieren mit CSS wird an dieser Stelle nicht erforderlich.


• Falls Sie nach der daran befestigten Element löst die tatsächlichen Anbringung - Dies ist , wo das Plugin die ersetzt .affix-top oder .affix-bottom - Klasse mit der .affix Klasse (Sets position:fixed ). An dieser Stelle müssen Sie die CSS hinzufügen , top oder bottom Eigenschaft den daran befestigten Element auf der Seite zu positionieren.


• Wenn eine untere Offset definiert ist, daran vorbei Scrollen ersetzt die .affix Klasse mit .affix-bottom . Da Offsets sind optional, eine Einstellung erfordert, dass Sie die entsprechende CSS zu setzen. In diesem Fall fügen Sie position:absolute , wenn nötig.

Im ersten Beispiel oben, fügt das Affix - Plugin die .affix Klasse (position: fixed) mit dem <nav> Element , wenn wir 197 Pixel vom oberen geblättert haben. Wenn Sie das Beispiel öffnen, sehen Sie auch , dass wir die CSS hinzugefügt top Immobilien mit einem Wert von 0 bis zur .affix Klasse. Dies ist, um sicherzustellen, dass die navbar zu jeder Zeit an der Spitze der Seite bleibt, wenn wir 197 Pixel vom oberen geblättert haben.

Scrollspy & Affix

Mit dem Affix - Plugin zusammen mit dem Scrollspy Plugin:

Füllen Sie Bootstrap Affix Referenz

Für eine vollständige Referenz aller Methoden und Ereignisse bringen, gehen Sie auf unsere Bootstrap JS Affix Referenz .