File kode sumber:
Scrollspy.js
Menerapkan fungsi
1. Ketika hashkey diatur di area gulir mencapai posisi yang valid, item yang ditentukan pada navigasi diatur dalam hubungan.
2. Navigasi harus .Nav> li> struktur, dan hashkey pada href atau target data harus terikat pada hashkey
3. Pasti ada gaya .nav di menu
4. Target data di area gulir harus konsisten dengan ID induk navigasi (harus menjadi induk)
<Div ID = "Selector"> <ul> <li> <a href = "#satu"> satu </a> </li> <li> <a href = "#dua"> dua </a> </li> <li> <a href = "#" tiga "</a> </li> </ul> </div> </data-tping =" uap = "taPREX =" UNTED = "Data =". Overflow: Tersembunyi; overflow-y: auto; " > <h4 id = "satu"> ibe </h4> <p> Satu konten spesifik <br/> satu konten spesifik <br/> satu konten spesifik <br/> satu konten spesifik <br/> </p> <h4 id = "dua"> dua </h4> <p> satu konten spesifik <br/> satu konten spesifik <br/> </p> </h4 id = "tiga" tiga "hm. Konten <br/> </p> <h4 id = "tiga"> tiga </h4> <p> Satu konten spesifik <br/> satu konten spesifik <br/> </p> <h4 id = "tiga"> tiga </h4> <p> satu konten spesifik <br/> satu konten spesifik <br/> satu konten spesifik <br/> </p>
Analisis Kode Sumber:
1. Prinsip: Ketika posisi hashkey dalam wadah gulir hanya nilai yang ditetapkan oleh offset di bagian atas wadah, highlight HREF yang sesuai dalam navigasi akan ditetapkan.
2. Jika area gulir adalah badan, elemen area pengguliran akan ditandai sebagai jendela (dinilai dalam konstruktor)
ini. $ scrolleLement = $ (elemen) .is (document.body)? $ (jendela): $ (elemen)
3. Getscrolheight: Dapatkan ketinggian konten dari wadah gulir (termasuk bagian tersembunyi)
ini. $ scrolleLement [0] .scrollheight || Math.max (ini. $ Body [0] .scrollheight, document.documentelement.scrollheight)
4. Segarkan: Segarkan dan simpan nilai masing -masing hashkey dalam wadah gulir
4.1. Gunakan Offset untuk mendapatkan nilai posisi secara default. Jika area gulir bukan jendela, gunakan posisi untuk mendapatkannya.
if (! $. isWindow (this. $ scrollelement [0])) {offsetMethod = 'position' offsetbase = this. $ scrollement.scrolltop () // Dapatkan ketinggian dasar, jika ada konten di area gulir yang tidak berpartisipasi dalam perhitungan gulir}4.2. Menurut hashkey pada navigasi, traversal dan mendapatkan nilai offset yang sesuai dengan hashkey di area pengguliran:
this.$body .find(this.selector) .map(function () { var $el = $(this) var href = $el.data('target') || $el.attr('href') var $href = /^#./.test(href) && $(href) //Get the element corresponding to the hashkey in the scrolling area return ($href && $ href.length && $ href.is (': visible') && [[$ href [offsetMethod] (). Top + offsetbase, href]]) || itu.targets.push (ini [1])})5. Proses: Fungsi pemicu acara scrollbar digunakan untuk menghitung menu navigasi mana yang perlu disorot saat ini
5.1. Dapatkan jarak gulir dari wadah gulir:
var scrolltop = this. $ scrollelement.scrolltop () + this.options.offset
5.2. Tinggi maksimum yang dapat digulung oleh wadah bergulir
// Maksimum Gulir Tinggi = Jarak Pengaturan Gulir (Offset) + Gulir Konten Kontainer Tinggi - Gulir Pengaturan Kontainer Tinggi Var Maxscroll = This.Options.Offset + ScrollHeight - This. $ Scrollelement.height ()
5.3. Atur logika elemen gulir:
untuk (i = offsets.length; i--;) {// Transfer semua Offset ActiveTarget! = Target [i] // menilai apakah target saat ini sama dengan ActiveTarget && scrolltop> = offset [i] // tidak ada, atau Offset (i + 1] ===== NOT SCROLLTOP, atau SCROLLTOP, orsets [i + 1] ==== elemen i+1 tidak lebih besar dari tinggi gulir && this.activate (target [i]) // set i sebagai item aktif saat ini}6. Aktif: Atur menu navigasi yang ditentukan untuk disorot
7. CLEAR: CLEAR SEMUA MENU yang disorot
Artikel di atas secara singkat membahas analisis kode sumber bootstrap scrollspy (scrolling listening) adalah semua konten yang saya bagikan dengan Anda. Saya harap Anda dapat memberi Anda referensi dan saya harap Anda dapat mendukung wulin.com lebih lanjut.