in English

Scrollspy

Perbarui navigasi Bootstrap atau daftar komponen grup secara otomatis berdasarkan posisi gulir untuk menunjukkan tautan mana yang saat ini aktif di viewport.

Bagaimana itu bekerja

Scrollspy memiliki beberapa persyaratan untuk berfungsi dengan baik:

  • Jika Anda membuat JavaScript kami dari sumber, itu memerlukanutil.js .
  • Itu harus digunakan pada komponen Bootstrap nav atau grup daftar .
  • Scrollspy membutuhkan position: relative;elemen yang Anda mata-matai, biasanya <body>.
  • Saat memata-matai elemen selain <body>, pastikan untuk memiliki satu heightset dan overflow-y: scroll;diterapkan.
  • Jangkar ( <a>) diperlukan dan harus menunjuk ke elemen dengan itu id.

Ketika berhasil diterapkan, nav atau grup daftar Anda akan diperbarui sesuai, memindahkan .activekelas dari satu item ke item berikutnya berdasarkan target yang terkait.

Contoh di navbar

Gulir area di bawah bilah navigasi dan perhatikan perubahan kelas yang aktif. Item dropdown juga akan disorot.

@gemuk

Konten placeholder untuk contoh scrollspy. Anda mendapatkan arsitektur terbaik. Perangko paspor, dia kosmopolitan. Baik, segar, ganas, kami berhasil. Tidak pernah merencanakan bahwa suatu hari aku akan kehilanganmu. Dia memakan hatimu. Ciuman Anda adalah kosmik, setiap gerakan adalah keajaiban. Maksudku orang-orang itu, maksudku seperti dia orangnya. Salam orang-orang terkasih mari kita jalan-jalan. Miliki saja malam seperti 4 Juli! Tapi Anda lebih suka disia-siakan.

@mdo

Konten placeholder untuk contoh scrollspy. Karena dia adalah inspirasi dan artisnya. (Beginilah cara kami melakukannya) Jadi Anda ingin bermain dengan sihir. Jadi pastikan sebelum Anda memberikan semuanya kepada saya. Saya berjalan, saya berjalan di udara (malam ini). Lewati pembicaraan, dengarkan semuanya, saatnya berjalan-jalan.

satu

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

Konten placeholder untuk contoh scrollspy. Jika Anda ingin menari, jika Anda menginginkan semuanya, Anda tahu bahwa saya adalah gadis yang harus Anda panggil. Berjalan melalui badai saya akan. Jadi biarkan aku membawakanmu setelan ulang tahunmu. Salah satu yang berhasil lolos. Jumat malam lalu, ya saya pikir kita melanggar hukum, selalu bilang kita akan berhenti. Karena dia sedikit Yoko, Dan dia sedikit 'Oh tidak'. Saya ingin rahang droppin', eye poppin', head turnin', body shockin'. Ya, kami memaksimalkan kartu kredit kami dan dikeluarkan dari bar.

Dan beberapa konten placeholder lainnya, 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 navigasi bersarang

Scrollspy juga berfungsi dengan .navs bersarang. Jika bersarang .navadalah .active, orang tuanya juga akan .active. Gulir area di sebelah navbar dan perhatikan perubahan kelas yang aktif.

Barang 1

Konten placeholder untuk contoh scrollspy. Yang ini berhubungan dengan item 1. Membawamu bermil-mil tinggi, sangat tinggi, karena dia punya satu senyuman internasional. Ada orang asing di tempat tidurku, ada debaran di kepalaku. Oh tidak. Di kehidupan lain aku akan membuatmu tetap tinggal. Karena aku, aku mampu melakukan apa saja. Bersiap untuk pertempuran penobatan saya. Digunakan untuk mencuri minuman keras orang tuamu dan naik ke atap. Nada, tan fit dan siap, putar karena menjadi berat. Cintanya seperti obat. Kurasa aku lupa aku punya pilihan.

Butir 1-1

Konten placeholder untuk contoh scrollspy. Yang ini berhubungan dengan item 1-1. Anda mendapatkan arsitektur terbaik. Perangko paspor, dia kosmopolitan. Baik, segar, ganas, kami berhasil. Tidak pernah merencanakan bahwa suatu hari aku akan kehilanganmu. Dia memakan hatimu. Ciuman Anda adalah kosmik, setiap gerakan adalah keajaiban. Maksudku orang-orang itu, maksudku seperti dia orangnya. Salam orang-orang terkasih mari kita jalan-jalan. Miliki saja malam seperti 4 Juli! Tapi Anda lebih suka disia-siakan.

Butir 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

Konten placeholder untuk contoh scrollspy. Yang ini berhubungan dengan butir 3-2. Kamu asli, tidak bisa tergantikan. Sepanjang malam mereka bermain, lagumu. Gadis California tidak dapat disangkal. Bagaikan burung tanpa sangkar. Tidak ada rasa takut sekarang, lepaskan dan bebaskan saja, aku akan mencintaimu tanpa syarat. Aku bisa melihat tulisan di dinding. Anda bisa berkeliling dunia tetapi tidak ada 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 grup daftar

Scrollspy juga bekerja dengan .list-groups. Gulir area di sebelah grup daftar dan perhatikan perubahan kelas yang aktif.

Barang 1

Konten placeholder untuk contoh grup daftar scrollspy. Yang ini berhubungan dengan item 1. Tidak perlu permintaan maaf. Tidak ada rasa takut sekarang, lepaskan dan bebaskan saja, aku akan mencintaimu tanpa syarat. Malam Jum'at kemarin. Jangan jadi orang yang pemalu, aku yakin itu cantik. Musim panas setelah sekolah menengah ketika kami pertama kali bertemu. Karena dia adalah inspirasi dan artisnya. Apa? Tunggu. Berpikir bahwa aku adalah pengecualian.

Butir 2

Konten placeholder untuk contoh grup daftar scrollspy. Yang ini berhubungan dengan item 2. Ya, dia menari dengan iramanya sendiri. Oh tidak. Anda bisa menjadi yang terhebat. 'Karena sayang kau adalah kembang api. Mungkin alasan mengapa semua pintu ditutup. Buka hatimu dan biarkan saja dimulai. Sangat chic, ya, dia klasik.

Butir 3

Konten placeholder untuk contoh grup daftar scrollspy. Yang ini berhubungan dengan item 3. Kami pergi lebih tinggi dan lebih tinggi. Tidak pernah satu tanpa yang lain, kami membuat perjanjian. Aku berjalan di udara. Seseorang mengatakan bahwa Anda telah menghapus tato Anda. Sekarang aku melayang seperti kupu-kupu. Nada, tan fit dan siap, putar karena menjadi berat. Karena begitu kau milikku, begitu kau jadi milikku. Anda hanya perlu menyalakan lampu dan membiarkannya bersinar! Jadi kami pergi ke bulevar. Apakah Anda pernah merasa, merasa begitu tipis kertas. Saya melihat semuanya, saya melihatnya sekarang.

Butir 4

Konten placeholder untuk contoh grup daftar scrollspy. Yang ini berhubungan dengan item 4. Musim panas setelah sekolah menengah ketika kami pertama kali bertemu. Tidak ada rasa takut sekarang, lepaskan dan bebaskan saja, aku akan mencintaimu tanpa syarat. Kulit yang terkena sinar matahari begitu panas, kami akan melelehkan es loli Anda. Cinta ini akan membuatmu 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 dengan mudah menambahkan perilaku scrollspy ke navigasi bilah atas Anda, tambahkan data-spy="scroll"ke elemen yang ingin Anda mata-matai (biasanya ini adalah <body>). Kemudian tambahkan data-targetatribut dengan ID atau kelas elemen induk dari setiap .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

Setelah menambahkan position: relative;CSS Anda, panggil scrollspy melalui JavaScript:

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

Target ID yang dapat diselesaikan diperlukan

Tautan Navbar harus memiliki target id yang dapat diselesaikan. Misalnya, a <a href="#home">home</a>harus sesuai dengan sesuatu di DOM seperti <div id="home"></div>.

Elemen non- :visibletarget diabaikan

Elemen target yang tidak :visiblesesuai dengan jQuery akan diabaikan dan item navigasi yang sesuai tidak akan pernah disorot.

Metode

.scrollspy('refresh')

Saat menggunakan scrollspy bersamaan dengan menambahkan atau menghapus elemen dari DOM, Anda harus memanggil metode penyegaran seperti:

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

.scrollspy('dispose')

Menghancurkan scrollspy elemen.

Pilihan

Opsi dapat diteruskan melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama opsi ke data-, seperti pada data-offset="".

Nama Jenis Bawaan Keterangan
mengimbangi nomor 10 Piksel untuk diimbangi dari atas saat menghitung posisi gulir.
metode rangkaian mobil Menemukan bagian mana elemen mata-mata berada. autoAkan memilih metode terbaik untuk mendapatkan koordinat gulir. offsetakan menggunakan metode offset jQuery untuk mendapatkan koordinat gulir. positionakan menggunakan metode posisi jQuery untuk mendapatkan koordinat gulir.
target string | objek jQuery | elemen DOM Menentukan elemen untuk menerapkan plugin Scrollspy.

Acara

Jenis Acara Keterangan
aktifkan.bs.scrollspy Acara ini diaktifkan pada elemen gulir setiap kali item baru diaktifkan oleh scrollspy. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})