Affix ist eine nützliche Steuerung in Bootstrap, mit der die Position der Scrollbar des Browsers überwacht und Ihre Navigation jederzeit im sichtbaren Bereich der Seite aufbewahrt wird. Zu Beginn war die Navigation ein normales Streaming -Layout auf der Seite, das eine feste Position im Dokument einnahm. Wenn die Seite scrolliert wurde, wurde die Navigation automatisch zu einem festen Layout (behoben), immer im Betrachtungsbereich des Benutzers. Sprechen wir über seine Verwendung. Schauen wir uns zunächst das Implementierungsprinzip an. Es wird erreicht, indem die Klassenattribute von Seitenelementen in Echtzeit geändert werden
Zu Beginn wird das AFFXI-Top-Attribut automatisch zur Klasse des Elements hinzugefügt, das Affix anwendet.
Wenn die Scrollbar so scrolliert, dass die Navigation die Spitze der Seite erreicht, wird der Affix-Top in die Klasse des Elements geändert.
Wenn Sie die Bildlaufleiste nach unten auf der Seite ziehen, wechselt Affix automatisch wieder in Affix-Bottom
Der obige Vorgang wird durch die Kontrolle selbst vollständig implementiert, und wir müssen nicht eingreifen. Wir müssen nur die CSS in diesen Zuständen schreiben.
Wenn wir einstellen können
.Affix-top {top: 150px;}. Affix {top: 20px; // Die Websites, die normalerweise mit Bootstrap erstellt wurden, haben eine Navigationsleiste am Kopf} .Affix-bottom {…}Schauen wir uns an, wie es verwendet wird
1. Übergeben Sie das Datenattribut
Das Seitenelement, das Sie anhören müssen, müssen nur datenspy = "Affix" hinzufügen. Verwenden Sie dann Offsets, um das Ein- und Ausschalten eines Elements zu bestimmen.
<ul data-spy = "Affix" data-offset-top = "190"> <li> <a href = "#eins"> Tutorial eins </a> </li> <li> <a href = "#zwei"> Tutorial zwei </a> </li> <a <a href = "#drei"> Tutorial drei </a> </li> </ul.#"#"> Tutorial Drei </a> </li> </ull.
Wo Data-Offset-Top die Position ist, in der sich das Affix-Top-Statuselement von oben auf der Seite befindet. Beim Scrollen nach oben auf der Seite können wir den Stil ".Affix" so festlegen, dass er seinen "Top" -Wert zurücksetzen kann.
2. JavaScript aufrufen
Der Beispielcode lautet wie folgt:
$ ('#mynav'). Affix ({Offset: {top: 100, // Die Position vom oberen Rand der Seite im Scrollen ist unten: function () {// Die Position vom unteren auf der Seite, wenn das Scrollen abgeschlossen ist (this.bottom = $ ('. BS-Footer'.Der HTML -Code lautet wie folgt (nur der Kerncode wird angezeigt):
<ul id="myNav"><li><a href="#one">Tutorial One</a></li><li><a href="#two">Tutorial Two</a></li><li><a href="#three">Tutorial Three</a></li></ul>…<div></div>
Die obigen scheint die Verwendung von Affix in Bootstrap eingeführt zu haben, aber im tatsächlichen Gebrauchsprozess werden wir feststellen, dass sich beim Ziehen der Bildlaufleiste die Breite der Seitenelemente mit Affix ändert, was zu unordentlichem Seitenlayout führt. Daher ist es am besten, seine Breite in den CSS aufzuschreiben, die Affix definiert, wie z.
.Affix {width: 250px;}Auf diese Weise gibt es kein Problem, wenn das Fenster groß genug ist, aber wenn Sie die Größe des Fensters ziehen und ändern, werden Sie feststellen, dass das Layout wieder durcheinander gebracht wird. Dieses Problem hat mich schon lange beunruhigt. Durch die Analyse des Quellcode von BootCSS fand ich schließlich, dass die Website "Hidden-Print", "Hidden-XS", "Hidden-SM" -attribute zu allen Klassen hinzugefügt hat, die Affix-Elemente verwenden. Es wird verwendet, um Affix zu verbergen, wenn der Bildschirm die Anforderungen nicht erfüllt. Obwohl es die Benutzerfreundlichkeit beeinflusst, stellt es sicher, dass das Layout auf jeden Fall ordentlich ist.
Das obige ist eine detaillierte Erklärung für die Verwendung von Affix -Steuerelementen in Bootstrap und die Art und Weise, um das schöne Layout aufrechtzuerhalten. Ich hoffe, es wird für alle hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird allen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!