Bootstrap mesti mempelajari kemahiran pemantauan menatal setiap hari_javascript

Artikel ini memperkenalkan pemantauan tatal Bootstrap untuk dipelajari oleh semua orang. Kandungan khusus adalah seperti berikut

1. Scrollspy pada masa ini memerlukan penggunaan komponen nav Bootstrap untuk menyerlahkan pautan aktif yang betul.

---- Jika anda menggunakan pemantauan tatal, bar navigasi mesti menggunakan komponen navigasi class="nav":

Berikut ialah bahagian kod sumber, bahagian yang bertanda merah boleh membuktikan ini:

Apabila menggunakan ScrollSpy, anda perlu menggunakan teg 73a72cdc17fc2b29bb35d64b4687fa7c dan mesti ada teg 3499910bf9dac5ae3c52d5ede7383485

Nota: Selain itu, kita perlu meletakkan teg 73a72cdc17fc2b29bb35d64b4687fa7c ke dalam bekas lain (seperti div) dan menambah id pada Hartanah bekas induk (ini diperkenalkan dalam Bahagian 4)

function ScrollSpy(element, options) {
  this.$body     = $(document.body)
  this.$scrollElement = $(element).is(document.body) ? $(window) : $(element)
  this.options    = $.extend({}, ScrollSpy.DEFAULTS, options)
  this.selector    = (this.options.target || '') + ' .nav li > a'
  this.offsets    = []
  this.targets    = []
  this.activeTarget  = null
  this.scrollHeight  = 0

  this.$scrollElement.on('scroll.bs.scrollspy', $.proxy(this.process, this))
  this.refresh()
  this.process()
 }

2. Pautan Navbar mesti mempunyai sasaran id yang boleh diselesaikan Contohnya, bdbe26872a334f3b7c83b8ae7c50ac47home5db79b134e9f6b82c0b36e0489ee08ed ;16b28748ea4df4d9c2150843fecfba68.

--- Secara ringkasnya, teg 3499910bf9dac5ae3c52d5ede7383485 di bawah 25edfb22a4f469ecb59f1190150159c6 mesti mempunyai atribut href="#id" dan mesti ada 72263a468861a2fcd9da68136db30a295db79b134e9f6b82c0b36e0489ee08ed teg sedemikian; apabila kandungan menatal ke teg 5ffad543fdd9d71340ebb3c2c670dbf3, 25edfb22a4f469ecb59f1190150159c62dac5b3c1a71acb02bf03dd588b09a33 akan secara automatik dipilih.

--Sebenarnya, rakan-rakan yang telah melakukan pembangunan web mengetahui perkara ini Dalam versi HTML sebelumnya, tag anchor biasanya menggunakan bc8f08fb0993388c993dc7bf88c0ef43, tetapi tag anchor dalam HTML5 telah ditinggalkan nama atribut, gunakan atribut id

 ScrollSpy.prototype.activate = function (target) {
  this.activeTarget = target

  this.clear()

  var selector = this.selector +
   '[data-target="' + target + '"],' +
   this.selector + '[href="' + target + '"]'

  var active = $(selector)
   .parents('li')
   .addClass('active')

  if (active.parent('.dropdown-menu').length) {
   active = active
    .closest('li.dropdown')
    .addClass('active')
  }

  active.trigger('activate.bs.scrollspy')
 }

3. Tidak kira kaedah pelaksanaan, scrollspy memerlukan penggunaan kedudukan: relatif pada elemen yang anda intip ;, pastikan anda mempunyai set ketinggian dan limpahan-y: tatal digunakan.

--- Jika anda memantau tatal Badan, anda mesti menambah kedudukan:gaya relatif kepada badan

--- Jika yang dipantau bukan Badan, tetapi elemen lain [nampaknya kaedah ini biasa], maka anda perlu menambah tiga gaya: position:relative;height:500px;overflow -y :skrol;

ScrollSpy.prototype.refresh = function () {
  var that     = this
  var offsetMethod = 'offset'
  var offsetBase  = 0

  this.offsets   = []
  this.targets   = []
  this.scrollHeight = this.getScrollHeight()

  if (!$.isWindow(this.$scrollElement[0])) {
   offsetMethod = 'position'
   offsetBase  = this.$scrollElement.scrollTop()
  }

4. Untuk menambah gelagat scrollspy dengan mudah pada navigasi bar atas anda, tambahkan data-spy="scroll" pada elemen yang anda ingin mengintip (kebiasaannya ini ialah 6c04bd5ca3fcae76e30b72ad730ca86d), kemudian tambahkan sasaran data atribut dengan ID atau kelas elemen induk bagi mana-mana Bootstrap .navcomponent.

--- Anda perlu menambah atribut data-spy="scroll" dan atribut data-target pada label kandungan menatal

Atribut pengintip data menentukan elemen untuk dipantau dan atribut sasaran data menentukan penyerlahan nav yang perlu dikawal semasa menatal

Lihat kod sumber permulaan di bawah sekali lagi Kedudukan yang ditandakan dengan warna merah, nilai this.options.target, adalah sama dengan nilai sasaran data bagi elemen kandungan menatal, anda mungkin terfikir bahawa sebelum mentakrifkan .nav Apabila membuat komponen, kita perlu meletakkan .nav dalam bekas lain (seperti div), dan bekas itu perlu mempunyai atribut id (nilai yang sama seperti sasaran data perlu ditetapkan di sini ).

function ScrollSpy(element, options) {
  this.$body     = $(document.body)
  this.$scrollElement = $(element).is(document.body) ? $(window) : $(element)
  this.options    = $.extend({}, ScrollSpy.DEFAULTS, options)
  this.selector    = (this.options.target || '') + ' .nav li > a'
  this.offsets    = []
  this.targets    = []
  this.activeTarget  = null
  this.scrollHeight  = 0

  this.$scrollElement.on('scroll.bs.scrollspy', $.proxy(this.process, this))
  this.refresh()
  this.process()
 }

5. Selepas menambah kedudukan: relatif dalam CSS anda, hubungi scrollspy melalui JavaScript:

$('yourTag').scrollspy({ sasaran: 'nav-parent-div-id' })
-- yourTag ialah ID elemen untuk membawa kandungan skrol, nav-parent-div-id ialah id elemen induk elemen .nav (iaitu, nilai sasaran data )

Saya menulis banyak perkara rawak, berikut adalah ringkasan beberapa langkah mudah:

　1. Tambah tag240da3ef6b880ee42429071353b2bdbe

2. Tambahkan komponen .nav dalam teg dan tambahkan atribut href="#tag" pada li->a

　3. Tambah d111d6fe33c5d1eadcb1b41531cb3333;

　4. Tambahkan gaya #content{height:500px;overflow-y:scroll;option:relative;}

5. Tambah skrip $('#content').scrollspy({target:'scrollSpyID'});

Akhir sekali, sedikit berangan:

<style type="text/css">
    #body {
      position: relative;
      height: 500px;
      overflow-y: scroll;
    }
  </style>

<div id="sc">
    <ul class="nav nav-pills">
      <li class="active">
        <a href="#A">第一段</a>
      </li>
      <li>
        <a href="#B">第二段</a>
      </li>
      <li>
        <a href="#C">第三段</a>
      </li>
    </ul>

  </div>

<div id="body" class="container-fluid" data-spy="scroll" data-target="#sc">

　　<a id="A">第一段</a><br />

　　　　<!-- 这里要有很多内容，至少要保证可以滚动 -->

　　<a id="A">第二段</a><br />

　　　　<!-- 这里要有很多内容，至少要保证可以滚动 -->

　　<a id="A">第三段</a><br />

　　　　<!-- 这里要有很多内容，至少要保证可以滚动 -->

</div>

$(function () {
  $('#body').scrollspy({ target: '#sc' });
});

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.