in English

Scrollspy

Kemas kini navigasi Bootstrap secara automatik atau senaraikan komponen kumpulan berdasarkan kedudukan tatal untuk menunjukkan pautan yang sedang aktif dalam port pandang.

Bagaimana ia berfungsi

Scrollspy mempunyai beberapa keperluan untuk berfungsi dengan baik:

  • Jika anda sedang membina JavaScript kami daripada sumber, ia memerlukanutil.js .
  • Ia mesti digunakan pada komponen nav Bootstrap atau kumpulan senarai .
  • Scrollspy memerlukan position: relative;elemen yang anda intip, biasanya <body>.
  • Apabila mengintip unsur selain daripada <body>, pastikan anda mempunyai heightset dan overflow-y: scroll;digunakan.
  • Sauh ( <a>) diperlukan dan mesti menunjuk kepada elemen dengan itu id.

Apabila berjaya dilaksanakan, nav atau kumpulan senarai anda akan dikemas kini dengan sewajarnya, mengalihkan .activekelas dari satu item ke item seterusnya berdasarkan sasaran yang berkaitan.

Contoh dalam navbar

Tatal kawasan di bawah bar navigasi dan lihat perubahan kelas aktif. Item lungsur turun akan diserlahkan juga.

@gemuk

Kandungan pemegang tempat untuk contoh scrollspy. Anda mendapat seni bina terbaik. Setem pasport, dia kosmopolitan. Baik, segar, garang, kami mendapatnya di kunci. Tidak pernah merancang bahawa suatu hari nanti saya akan kehilangan awak. Dia makan hati awak. Ciuman anda adalah kosmik, setiap pergerakan adalah sihir. Maksud saya yang, maksud saya seperti dia. Salam insan tersayang mari kita melancong. Miliki sahaja malam seperti 4 Julai! Tetapi anda lebih suka membazir.

@mdo

Placeholder content for the scrollspy example. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk.

one

Placeholder content for the scrollspy example. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.

two

Placeholder content for the scrollspy example. It's time to bring out the big balloons. I'm walking, I'm walking on air (tonight). Yeah, we maxed our credit cards and got kicked out of the bar. Yo, shout out to all you kids, buying bottle service, with your rent money. I'm ma get your heart racing in my skin-tight jeans. If you get the chance you better keep her. Yo, shout out to all you kids, buying bottle service, with your rent money.

three

Kandungan pemegang tempat untuk contoh scrollspy. Jika anda mahu menari, jika anda mahu semuanya, anda tahu bahawa saya adalah gadis yang patut anda panggil. Berjalan melalui ribut yang saya lakukan. Jadi izinkan saya membawakan awak dalam sut hari jadi awak. Yang terlepas. Malam Jumaat lepas, ya saya rasa kita melanggar undang-undang, selalu cakap kita akan berhenti. Kerana dia sedikit Yoko, Dan dia sedikit 'Oh tidak'. Saya mahu rahang droppin', eye poppin', head turnin', body shockin'. Ya, kami memaksimumkan kad kredit kami dan ditendang keluar dari bar.

Dan beberapa lagi kandungan pemegang tempat, untuk ukuran yang baik.

<nav id="navbar-example2" class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#fat">@fat</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#mdo">@mdo</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#one">one</a>
        <a class="dropdown-item" href="#two">two</a>
        <div role="separator" class="dropdown-divider"></div>
        <a class="dropdown-item" href="#three">three</a>
      </div>
    </li>
  </ul>
</nav>
<div data-spy="scroll" data-target="#navbar-example2" data-offset="0">
  <h4 id="fat">@fat</h4>
  <p>...</p>
  <h4 id="mdo">@mdo</h4>
  <p>...</p>
  <h4 id="one">one</h4>
  <p>...</p>
  <h4 id="two">two</h4>
  <p>...</p>
  <h4 id="three">three</h4>
  <p>...</p>
</div>

Contoh dengan nav bersarang

Scrollspy juga berfungsi dengan .navs bersarang. Jika bersarang , .navibu .activebapanya juga .active. Tatal kawasan di sebelah bar navigasi dan lihat perubahan kelas aktif.

Perkara 1

Kandungan pemegang tempat untuk contoh scrollspy. Yang ini berkaitan dengan item 1. Membawa anda berbatu-batu tinggi, begitu tinggi, kerana dia mempunyai senyuman antarabangsa yang satu itu. Ada orang asing di atas katil saya, ada rasa berdebar-debar di kepala saya. Oh tidak. Dalam kehidupan lain saya akan membuat anda tinggal. Kerana saya, saya mampu melakukan apa sahaja. Sesuai untuk pertarungan mahkota saya. Digunakan untuk mencuri minuman keras ibu bapa anda dan naik ke bumbung. Nada, sawo matang dan sedia, pasangkannya kerana ia menjadi berat. Cintanya seperti dadah. Saya rasa saya terlupa saya mempunyai pilihan.

Perkara 1-1

Kandungan pemegang tempat untuk contoh scrollspy. Yang ini berkaitan dengan perkara 1-1. Anda mendapat seni bina terbaik. Setem pasport, dia kosmopolitan. Baik, segar, garang, kami mendapatnya di kunci. Tidak pernah merancang bahawa suatu hari nanti saya akan kehilangan awak. Dia makan hati awak. Ciuman anda adalah kosmik, setiap pergerakan adalah sihir. Maksud saya yang, maksud saya seperti dia. Salam insan tersayang mari kita melancong. Miliki sahaja malam seperti 4 Julai! Tetapi anda lebih suka membazir.

Perkara 1-2

Placeholder content for the scrollspy example. This one relates to the item 1-2. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

Item 2

Placeholder content for the scrollspy example. This one relates to item 2. Don't need apologies. There is no fear now, let go and just be free, I will love you unconditionally. Last Friday night. Don't be a shy kinda guy I'll bet it's beautiful. Summer after high school when we first met. 'Cause she's the muse and the artist. What? Wait. No, no, no, no. Thought that I was the exception.

Item 3

Placeholder content for the scrollspy example. This one relates to item 3. Word on the street, you got somethin' to show me, me. All this money can't buy me a time machine. Make it like your birthday everyday. So we hit the boulevard. You make me feel like I'm livin' a teenage dream, the way you turn me on Skip the talk, heard it all, time to walk the walk. Word on the street, you got somethin' to show me, me. It's no big deal, it's no big deal, it's no big deal.

Item 3-1

Placeholder content for the scrollspy example. This one relates to item 3-1. Baby do you dare to do this? This is no big deal. Yeah, you're lucky if you're on her plane. Just own the night like the 4th of July! Standing on the frontline when the bombs start to fall. So just be sure before you give it all to me.

Item 3-2

Kandungan pemegang tempat untuk contoh scrollspy. Yang ini berkaitan dengan perkara 3-2. Anda asli, tidak boleh diganti. Sepanjang malam mereka bermain, lagu awak. Gadis California kita tidak dapat dinafikan. Seperti burung tanpa sangkar. Tiada ketakutan sekarang, lepaskan dan bebaskan sahaja, saya akan mencintai awak tanpa syarat. Saya dapat melihat tulisan di dinding. Anda boleh mengembara ke dunia tetapi tiada apa yang mendekati pantai emas.

<nav id="navbar-example3" class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <nav class="nav nav-pills flex-column">
    <a class="nav-link" href="#item-1">Item 1</a>
    <nav class="nav nav-pills flex-column">
      <a class="nav-link ml-3 my-1" href="#item-1-1">Item 1-1</a>
      <a class="nav-link ml-3 my-1" href="#item-1-2">Item 1-2</a>
    </nav>
    <a class="nav-link" href="#item-2">Item 2</a>
    <a class="nav-link" href="#item-3">Item 3</a>
    <nav class="nav nav-pills flex-column">
      <a class="nav-link ml-3 my-1" href="#item-3-1">Item 3-1</a>
      <a class="nav-link ml-3 my-1" href="#item-3-2">Item 3-2</a>
    </nav>
  </nav>
</nav>

<div data-spy="scroll" data-target="#navbar-example3" data-offset="0">
  <h4 id="item-1">Item 1</h4>
  <p>...</p>
  <h5 id="item-1-1">Item 1-1</h5>
  <p>...</p>
  <h5 id="item-1-2">Item 1-2</h5>
  <p>...</p>
  <h4 id="item-2">Item 2</h4>
  <p>...</p>
  <h4 id="item-3">Item 3</h4>
  <p>...</p>
  <h5 id="item-3-1">Item 3-1</h5>
  <p>...</p>
  <h5 id="item-3-2">Item 3-2</h5>
  <p>...</p>
</div>

Contoh dengan kumpulan senarai

Scrollspy juga berfungsi dengan .list-groups. Tatal kawasan di sebelah kumpulan senarai dan tonton perubahan kelas aktif.

Perkara 1

Kandungan pemegang tempat untuk contoh kumpulan senarai scrollspy. Yang ini berkaitan dengan perkara 1. Tidak perlu minta maaf. Tiada ketakutan sekarang, lepaskan dan bebaskan sahaja, saya akan mencintai awak tanpa syarat. Malam Jumaat lepas. Jangan jadi lelaki yang malu-malu, saya yakin ia cantik. Musim panas selepas sekolah menengah ketika pertama kali kita bertemu. Kerana dia adalah muse dan artis. Apa? Tunggu. Berfikir bahawa saya adalah pengecualian.

Perkara 2

Kandungan pemegang tempat untuk contoh kumpulan senarai scrollspy. Yang ini berkaitan dengan item 2. Ya, dia menari mengikut rentaknya sendiri. Oh tidak. Anda boleh menjadi yang terhebat. Kerana, sayang, awak adalah bunga api. Mungkin sebab semua pintu ditutup. Buka hati anda dan biarkan ia bermula. Sangat bergaya, ya, dia seorang yang klasik.

Perkara 3

Kandungan pemegang tempat untuk contoh kumpulan senarai scrollspy. Yang ini berkaitan dengan item 3. Kami pergi lebih tinggi dan lebih tinggi. Tidak pernah satu tanpa yang lain, kami membuat perjanjian. Saya berjalan di udara. Seseorang berkata anda telah mengeluarkan tatu anda. Sekarang saya terapung seperti rama-rama. Nada, sawo matang dan sedia, pasangkannya kerana ia menjadi berat. Sebab sekali awak milik saya, sekali awak jadi milik saya. Anda hanya perlu menyalakan lampu dan biarkan ia bersinar! Jadi kami pergi ke boulevard. Adakah anda pernah rasa, rasa begitu nipis kertas. Saya melihat semuanya, saya melihatnya sekarang.

Perkara 4

Kandungan pemegang tempat untuk contoh kumpulan senarai scrollspy. Yang ini berkaitan dengan perkara 4. Musim panas selepas sekolah menengah semasa kami mula-mula bertemu. Tiada ketakutan sekarang, lepaskan dan bebaskan sahaja, saya akan mencintai awak tanpa syarat. Kulit yang dicium matahari sangat panas kami akan mencairkan popsicle anda. Cinta ini akan membuat anda melayang.

<div id="list-example" class="list-group">
  <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
  <a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
  <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
  <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
</div>
<div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example">
  <h4 id="list-item-1">Item 1</h4>
  <p>...</p>
  <h4 id="list-item-2">Item 2</h4>
  <p>...</p>
  <h4 id="list-item-3">Item 3</h4>
  <p>...</p>
  <h4 id="list-item-4">Item 4</h4>
  <p>...</p>
</div>

Penggunaan

Melalui atribut data

Untuk menambahkan gelagat scrollspy dengan mudah pada navigasi bar atas anda, tambahkan data-spy="scroll"pada elemen yang anda ingin mengintip (kebiasaannya ini ialah <body>). Kemudian tambahkan data-targetatribut dengan ID atau kelas elemen induk bagi mana-mana .navkomponen Bootstrap.

body {
  position: relative;
}

<body data-spy="scroll" data-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

Melalui JavaScript

Selepas menambah position: relative;dalam CSS anda, hubungi scrollspy melalui JavaScript:

$('body').scrollspy({ target: '#navbar-example' })

Sasaran ID boleh diselesaikan diperlukan

Pautan Navbar mesti mempunyai sasaran id yang boleh diselesaikan. Sebagai contoh, <a href="#home">home</a>mesti sepadan dengan sesuatu dalam DOM seperti <div id="home"></div>.

Elemen :visiblebukan sasaran diabaikan

Elemen sasaran yang tidak :visiblemengikut jQuery akan diabaikan dan item nav yang sepadan tidak akan diserlahkan.

Kaedah

.scrollspy('refresh')

Apabila menggunakan scrollspy bersama-sama dengan menambah atau mengalih keluar elemen daripada DOM, anda perlu memanggil kaedah muat semula seperti:

$('[data-spy="scroll"]').each(function () {
  var $spy = $(this).scrollspy('refresh')
})

.scrollspy('dispose')

Memusnahkan scrollspy elemen.

Pilihan

Pilihan boleh dihantar melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama pilihan pada data-, seperti dalam data-offset="".

Nama taip Lalai Penerangan
mengimbangi nombor 10 Piksel untuk mengimbangi dari atas apabila mengira kedudukan tatal.
kaedah tali auto Mencari bahagian mana elemen intipan berada. autoakan memilih kaedah terbaik untuk mendapatkan koordinat tatal. offsetakan menggunakan kaedah offset jQuery untuk mendapatkan koordinat tatal. positionakan menggunakan kaedah kedudukan jQuery untuk mendapatkan koordinat tatal.
sasaran rentetan | objek jQuery | elemen DOM Menentukan elemen untuk menggunakan pemalam Scrollspy.

Peristiwa

Jenis acara Penerangan
activate.bs.scrollspy Peristiwa ini menyala pada elemen skrol apabila item baharu diaktifkan oleh scrollspy. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})