Einführung
Beim Schreiben eines Blogs werden viele Untertitel häufig für die Organisation verwendet. Wenn der Artikel lang ist, müssen Sie zwischen verschiedenen Titeln hin und her schalten. Wenn Sie manuell ein Verzeichnis hinzufügen und einen Ankerpunkt hinzufügen, ist es wirklich problematisch. Aus diesem Grund können Sie einen Verzeichnisbereich dynamisch generieren und das von Bootstrap bereitgestellte Affix-Plug-In verwenden, um den Verzeichnisbereich auf der Seite zu beheben. Bootstrap -Dokumentation verwendet sie
Vorbereitung - Einführung von Bootstrap.min.js
Stecken Sie Bootstrap.min.js in das Skript -Tag vor dem Körper, und Uikit.min.js wird vorerst nicht vorgestellt.
Nach der Einführung verwandter Plug-Ins ist es unsere Idee, zunächst automatisch Ankerpunkte und Menüinhalte basierend auf dem Artikel zu generieren, dann einen festen Effekt hinzuzufügen, und dann das Scrollspy-Plug-In von UIKIT verwenden (es gibt auch Scrollspy in Bootstrap und die Nutzungsmethode ist nahezu gleich).
Lernen Sie die Verwendung von Affix ein
Das Affix-Plug-In hilft uns dabei, die Position des Navigationsteils zu beheben und den festen Elementen die skanische Situation des Benutzers zu vertikalen Offsets hinzuzufügen, sodass die NAV zwischen drei Klassen schaltet:
1.Affix-top: zeigt oben an
2.Affix: bedeutet, auf der Seite zu scrollen, feste Attribute hinzuzufügen und benutzerdefinierte Offsets zu verwenden
3.AFFIX-BOTTOM: bedeutet, den Boden zu erreichen
Um Affix zu aktivieren, erfordert nur der folgende Code:
$ ('#nav'). Affix ({Offset: {top: $ ('Header'). Offset (). Top, unten: ($ ('footer'). oterHeight (true) + $ ('. Anwendung'). outHeight (true)) + 40});1. organisieren Sie HTML -Code -Teile
<ul id = "mysideBar"> </ul>
Stellen Sie sicher, dass Sie NAV- und Affix -Kurse für UL hinzufügen.
2. Generieren Sie Kapselungscode
Führen Sie diesen Code -Snippet in Ihr eigenes Skriptskript ein
$. $ list.eq (i) .Text (); } this.append (AffixValue);
Das Prinzip des obigen Code besteht darin, ein Tag oder eine Klasse zu übergeben, die als Titeleinheit für die CreateAffix -Funktion betrachtet und während des Traversalprozesses Ankerlinks dazu hinzufügen muss.
3.. Wie man benutzt
Schreiben von HTML -Teilen
<ul id = "mysideBar"> <li> <a href = "#node1"> </a> </li> <li> <a href = "#node2"> </a> </li> <li> <a href = "#node3"> </li> </ul> <h3 id = "node1"> cwitle 1 </li> </ul> <h3 id = "node1"> cwitle 1 </li> </ul> <h3 = "node1"> cwitle 1 </li> </ul> <h3 = "node1" node1 " 2 </h3> <H3 ID = "Node3"> Titel 3 </h3>
JavaScript -Abschnitt schreiben
$ (function () {$ ('#mysideBar'). CreateAffix ('H3'); // Geben Sie an, dass im Artikel das "H3` -Tag dem Anker hinzugefügt werden muss.});Lösen Sie das Problem des Ankerpunktaussatzes
Da der Ankerpunkt die Seite standardmäßig in die Oberseite des Ankerelements verschiebt, dh wenn wir die oben genannte Operation unter Titel 1 durchführen, wird die Seite, wenn wir auf den Ankerpunkt klicken, in die oberste Position, in der sich 'Titel 1' befindet. Wenn oben eine Menüleiste vorhanden ist, wird sie blockiert und gelöst, indem der CSS -Stil festgelegt wird.
.Class { /* Das Hinzufügen von Polster kann dazu führen, dass der Anker die num px nach unten verschiebt, dh die Höhe der Menüleiste überspringen. Make-up für den leeren Teil, der durch Padding-Top verursacht wird, indem der Rand auf einen negativen Wert eingestellt wird*/ padding-top: num px; Rand: -num px;}Fügen Sie das Hören hinzufügen
Derzeit ist unsere DOM -Dokumentation so.
<ul id = "mysideBar"> <li> <a href = "#node1"> </a> </li> <li> <a href = "#node2"> </a> </li> <li> <a href = "#node3"> </li> </ul>
Verarbeiten Sie es, führen Sie das UIKIT -Attribut vor und überprüfen Sie das Dokument für Details
<ul id = "mysideBar" data-uk-scrollspy-nav = "{nächst: 'li', SmoothScrol: true}"> <li> <a href = "#node1"> </a> </li> <li> <a href = "#node2"> </li> <li> <li> <a href = "#node2"> </li> <li> <a href = "#node3"Uikit.min.js vorstellen
Da unser Menüelement (LI) nach dem Laden des Dokuments ausgeführt wird, funktioniert die Scrollspy von UIKIT, bevor das Menüelement generiert wird, definitiv nicht. Daher müssen wir uikit.min.js vorstellen, nachdem der Menüelement generiert wurde. Der Code ist wie folgt:
$ (function () {$ ('#mysideBar'). CreateAffix ('H3'); // Menü $ .GetScript ("uikit.min.js"); // laden uikit.min.js asynchron, und die Scrolling -Überwachung nimmt wirksam.});