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

dan mesti ada teg

Nota: Selain itu, kita perlu meletakkan teg

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, home ;.

--- Secara ringkasnya, teg di bawah

• mesti mempunyai atribut href="#id" dan mesti ada teg sedemikian; apabila kandungan menatal ke teg ,
• akan secara automatik dipilih.

--Sebenarnya, rakan-rakan yang telah melakukan pembangunan web mengetahui perkara ini Dalam versi HTML sebelumnya, tag anchor biasanya menggunakan , 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

), 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 tag

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

　3. Tambah

;

　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.