perkenalan
Saat menulis blog, banyak subtitle sering digunakan untuk organisasi. Ketika artikelnya panjang, Anda perlu membolak -balik bolak -balik antara judul yang berbeda. Jika Anda secara manual menambahkan direktori dan menambahkan titik jangkar, itu sangat merepotkan. Untuk alasan ini, Anda dapat secara dinamis menghasilkan area direktori dan menggunakan plug-in afiks yang disediakan oleh Bootstrap untuk memperbaiki area direktori pada halaman. Dokumentasi bootstrap menggunakannya
Persiapan - Memperkenalkan bootstrap.min.js
Masukkan bootstrap.min.js ke dalam tag skrip sebelum tubuh, dan uIKit.min.js tidak akan diperkenalkan untuk saat ini.
Setelah memperkenalkan plug-in terkait, ide kami adalah untuk terlebih dahulu menghasilkan titik jangkar dan konten menu berdasarkan artikel, kemudian tambahkan imbuhan ke dalamnya untuk menghasilkan efek yang tetap, dan kemudian menggunakan plug-in scrollspy dari UIKIT (ada juga scrollspy di bootstrap, dan metode penggunaan hampir sama).
Memperkenalkan pembelajaran penggunaan imbuhan
Plug-in Affix membantu kami memperbaiki posisi bagian navigasi dan menambahkan offset vertikal ke elemen tetap sesuai dengan situasi pengguliran pengguna, sehingga NAV beralih di antara tiga kelas:
1. AFFIX-TOP: Menunjukkan di atas
2.Affix: berarti menggulir halaman, menambahkan atribut tetap, dan menggunakan offset khusus
3. AFFIX-BOTTOM: berarti mencapai bagian bawah
Untuk mengaktifkan affix hanya membutuhkan kode berikut:
$ ('#nav'). Affix ({offset: {top: $ ('header'). Offset (). Top, Bottom: ($ ('footer'). OuteHeight (true) + $ ('. Aplikasi'). OuteHeight (true)) + 40}});1. Atur bagian kode HTML
<ul id = "mysideebar"> </ul>
Pastikan untuk menambahkan kelas NAV dan Affix untuk UL.
2. Hasilkan kode enkapsulasi
Perkenalkan cuplikan kode ini ke dalam skrip skrip Anda sendiri
; $. fn.extend ({"createaffix": function (selector) {$ list = $ ("" + selector), length = $ list.length, affixvalue = ""; for (var i = 0; i <length; i ++) {// tambahkan nama Atribut $ list.eq (i). $ list.eq (i) .text (); if (i == 0) {affixvalue + = "<li> <a href =#node" + i + "class = 'Active'> + Text +" </a> </li> "; } ini.Prinsip kode di atas adalah untuk lulus dalam tag atau kelas yang perlu dianggap sebagai unit judul untuk fungsi Createaffix, dan menambahkan tautan jangkar ke dalamnya selama proses traversal.
3. Cara menggunakan
Menulis bagian html
<ul id = "mysideBar"> <li> <a href = "#node1"> </a> </li> <li> <a href = "#node2"> </a> </li> <li> <a href = "#node3"> </a> </li> </ul> <a href = "node3"> </a> </Li> </ul> <a h3 id = "node3"> </a> </li> </ul> <a h3 id = "node3"> </a> </li> </ul> <a h3 id = "NODE3"> </a> </li> </ul> <h3 id id = "node3" " 2 </h3> <h3 id = "node3"> Judul 3 </h3>
Menulis bagian JavaScript
$ (function () {$ ('#mysideBar'). createaffix ('h3'); // menunjukkan bahwa dalam artikel, tag `h3` perlu ditambahkan ke jangkar.});Selesaikan masalah offset titik jangkar
Karena titik jangkar menggeser halaman ke bagian atas elemen jangkar secara default, yaitu, jika kita melakukan operasi di atas pada judul 1, ketika kita mengklik titik jangkar, halaman akan bergeser ke posisi teratas di mana 'judul 1' berada. Jika ada bilah menu di bagian atas, itu akan diblokir dan diselesaikan dengan mengatur gaya CSS.
.class { /* Menambahkan padding dapat menyebabkan jangkar menggeser num px ke bawah, yaitu, lewati ketinggian bilah menu. Make up untuk bagian kosong yang disebabkan oleh padding-top dengan mengatur margin-top ke nilai negatif*/ padding-top: num px; margin -top: -num px;}Tambahkan mendengarkan gulir
Saat ini dokumentasi DOM kami seperti ini.
<ul id = "mysideBar"> <li> <a href = "#node1"> </a> </li> <li> <a href = "#node2"> </a> </li> <li> <a href = "#node3"> </a> </li> </ul>
Prosesnya, perkenalkan atribut UIKIT, dan periksa dokumen untuk detailnya
<ul id = "mysideBar" data-uk-scrollspy-nav = "{terdekat: 'li', smoothscrool: true}"> <li> <a href = "#node1"> </a> </li> <li> <a href = "#node2"> </a> </li> <li> <a href = "#node2"> </a> </li> <li> <a href = "#node2"> </a> </li> <li> <a href = "#node2"> </a> </li> <li>Memperkenalkan uIKit.min.js
Karena item menu kami (LI) dieksekusi setelah dokumen dimuat, jika scrollspy UIKIT dieksekusi sebelum item menu dihasilkan, itu pasti tidak akan berfungsi. Oleh karena itu, kita perlu memperkenalkan uIKit.min.js setelah item menu dihasilkan. Kodenya adalah sebagai berikut:
$ (function () {$ ('#mysideBar'). createaffix ('h3'); // menghasilkan menu $ .getScript ("uIKit.min.js"); // Muat UIKIT.MIN.JS secara hanya, dan pemantauan gulir mulai berlaku.});