Das zusätzliche Navigation (Affix) Plugin ermöglicht es, irgendwo auf der Seite ein <div> festzuhalten. Sie können auch zwischen dem Ein- oder Ausschalten des Plugins umschalten. Ein häufiges Beispiel sind soziale Ikonen. Sie beginnen irgendwo, aber wenn die Seite auf eine Marke klickt, sperrt der <div> irgendwo ein und scrollt nicht zusammen mit dem Rest der Seite.
Wenn Sie die Funktionalität des Plugins separat verweisen möchten, müssen Sie auf Affix.js verweisen.
1. Nutzung
Zusätzliche Navigations-Plug-Ins (Affix) können durch Dateneigenschaften oder über JavaScript verwendet werden.
1. Durch Datenattribute: Wenn Sie dem Element zusätzliches Navigationsverhalten (Affix) hinzufügen müssen, müssen Sie dem Element, das Sie anhören müssen, nur Datenspy = "AFIX" hinzufügen. Verwenden Sie Offsets, um zu definieren, wenn die Verriegelung und Bewegung von Elementen umschalten.
2. Durch JavaScript: Sie können einem Element durch JavaScript (Affix) manuell zusätzliche Navigation hinzufügen, die zusätzliche Navigation hinzufügen können.
2. Positionierung durch CSS
In beiden oben genannten Möglichkeiten, um das Affix-Plug-In zu verwenden, müssen Sie Inhalte über CSS lokalisieren. Die Plug-In-Plug-In-Plug-In-Switches zwischen drei Klassen, von denen jeweils einen bestimmten Zustand darstellt: .Affix, .Affix-Top und .Affix-Bottom. Bitte befolgen Sie die folgenden Schritte, um Ihr eigenes CSS für diese drei Zustände einzurichten (nicht auf dieses Plugin angewiesen).
1. Am Anfang fügt das Plugin .Affix-Top hinzu, um das Element an seiner obersten Position anzuzeigen. Zu diesem Zeitpunkt ist keine CSS -Positionierung erforderlich.
2. Beim Scrollen durch Elemente mit zusätzlicher Navigation (Affix) sollte die tatsächliche zusätzliche Navigation (Affix) ausgelöst werden. Zu diesem Zeitpunkt ersetzt .Affix .Affix-Top und setzen Sie die Position fest: behoben; (bereitgestellt durch den CSS -Code von Bootstrap).
3. Wenn der untere Offset definiert ist, wenn die Schriftrolle diese Position erreicht, ersetzen Sie .Affix durch .AFFIX-BOTTOM. Da der Offset optional ist, muss ein geeigneter CSS zur gleichen Zeit festgelegt werden, wenn der Offset festgelegt ist. In diesem Fall Position hinzufügen: absolut; falls nötig.
3. Optionen
Es gibt einige Optionen, die Dateneigenschaften oder JavaScript übergeben haben. In der folgenden Tabelle werden folgende Optionen aufgeführt:
Iv. Beispiele
Zusätzliche Navigation bedeutet, sie irgendwo auf dem Bildschirm zu kleben, um die Ankerfunktion zu erkennen.
1. Basisbeispiele
<body data-spy = "scroll" data-target = "#myScrollSpy"> <div> <div style = "Höhe: 150px"> <H1> Bootstrap Affix </h1> </div> <div> <div> <div id = "myScrollSpy"> <ul data-spy = "Affix-1" -Anset-1 "> <li> <lilf ="#"#"#"#"#"° C-1"-"150"> <li> <a href = "#"#"#"#"#" §-1-Offset-Top = "150" 150 " </li> <li> <a href="#section-2">Part 2</a> </li> <li> <a href="#section-3">Part 3</a> </li> <li> <a href="#section-4">Part 4</a> </li> <li> <a href="#section-4">Part 5</a> </li> </ul> </div> <div> <h2 id="section-1">Part 1</h2> <p> ... </p> <h2 id="section-2">Part 2</h2> <p> ... </p> <h2 id="section-3">Part 3</h2> <p> ... </p> <h2 id="section-4">Part 4</h2> <p> ... </p> <h2 id="section-5">Part 4 </h2> <p> ... </p> </div> </div> </div>
2. Der CSS -Teil der Navigation
ul.nav-pills {width: 200px;} ul.nav-pills.affix {top: 30px;} // JavaScript anstelle von data-spy = "Affix" data-offset-top = "125" $ ('#myaffix').Wir verwenden standardmäßig Top und können natürlich auch standardmäßig auch unten verwenden. Diese Positionierungsmethode wird direkt über CSS positioniert.
// auf bodenul.nav-tabs.affix-bottom {booth: 30px;} // auf unten $ einstellen ('#myaffix'). Affix ({Offset: {unten: 150}})Affix enthält mehrere Ereignisse wie folgt:
// andere ähnliche $ ('#myaffix'). On ('Affixed-top.bs.affix', function () {alert ('Trigger!');});Wenn Sie weiterhin ausführlich studieren möchten, können Sie hier klicken, um Ihnen zu studieren und 3 aufregende Themen anzuhängen:
Bootstrap -Lern -Tutorial
Bootstrap Practical Tutorial
Bootstrap-Plug-in-Nutzungs-Tutorial
Das Obige dreht sich alles um diesen Artikel, ich hoffe, es wird für das Lernen aller hilfreich sein.