in English

Scrollspy

Nganyari kanthi otomatis navigasi Bootstrap utawa dhaptar komponen klompok adhedhasar posisi gulung kanggo nunjukake link endi sing lagi aktif ing viewport.

Cara kerjane

Scrollspy duwe sawetara syarat supaya bisa digunakake kanthi bener:

  • Yen sampeyan lagi mbangun JavaScript saka sumber, mbutuhakeutil.js .
  • Sampeyan kudu digunakake ing komponen nav Bootstrap utawa grup dhaptar .
  • Scrollspy mbutuhake position: relative;ing unsur sampeyan spying ing, biasane ing <body>.
  • Nalika spying ing unsur liyane saka <body>, dadi manawa kanggo duwe pesawat heightlan overflow-y: scroll;Applied.
  • Jangkar ( <a>) dibutuhake lan kudu ngarahake menyang unsur sing ana id.

Nalika kasil dileksanakake, nav utawa dhaftar grup bakal nganyari patut, mindhah .activekelas saka siji item kanggo sabanjuré adhedhasar Doel gadhah.

Conto ing navbar

Gulung area ing ngisor navbar lan nonton owah-owahan kelas aktif. Item gulung mudhun uga bakal disorot.

@lemak

Isi placeholder kanggo conto scrollspy. Sampeyan entuk arsitektur paling apik. Perangko paspor, dheweke kosmopolitan. Apik, seger, galak, kita entuk kunci. Ora tau ngrancang yen sedina aku bakal kelangan sampeyan. Dheweke mangan atimu. Kiss sampeyan kosmik, saben gerakan iku sihir. Maksudku sing, maksudku kaya dheweke. Salam seduluran, ayo dolan. Mung duwe wengi kaya 4 Juli! Nanging sampeyan luwih seneng boroske.

@mdo

Isi placeholder kanggo conto scrollspy. Amarga dheweke dadi muse lan seniman. (Mangkene carane) Dadi sampeyan pengin main sihir. Dadi manawa sadurunge sampeyan menehi kabeh marang aku. Aku mlaku-mlaku, aku mlaku-mlaku ing udhara (wengi). Skip omongan, krungu kabeh, wektu kanggo mlaku mlaku.

siji

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

Isi placeholder kanggo conto scrollspy. Yen sampeyan pengin nari, yen sampeyan pengin kabeh, sampeyan ngerti yen aku cah wadon sing kudu sampeyan nelpon. Mlaku liwat badai aku bakal. Dadi aku njaluk sampeyan nganggo setelan ulang tahun sampeyan. Sing lolos. Malem Jum'at wingi, ya aku ngira yen kita nglanggar hukum, mesthi ujar manawa bakal mandheg. 'Amarga dheweke rada Yoko, Lan dheweke rada 'Oh ora'. Aku pengin rahang droppin ', mripat poppin', sirah turnin', awak shockin'. Ya, kita maksimalake kertu kredit lan ditendhang metu saka bar.

Lan sawetara isi placeholder liyane, kanggo ukuran apik.

<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>

Conto karo nested nav

Scrollspy uga dianggo karo nested .navs. .navYen ana susuh .active, wong tuwane uga .active. Gulung wilayah ing jejere navbar lan nonton owah-owahan kelas aktif.

Item 1

Isi placeholder kanggo conto scrollspy. Iki ana hubungane karo item 1. Nggawe sampeyan dhuwur mil, dhuwur banget, amarga dheweke duwe eseman internasional. Ana wong liyo ing ambenku, ana sing nggegirisi. Oh, ora. Ing urip liyane aku bakal nggawe sampeyan tetep. Amarga aku, aku bisa apa wae. Cocog kanggo perang mahkotaku. Digunakake kanggo nyolong omben-omben wong tuwa lan munggah menyang payon. Nada, tan pas lan siap, nguripake munggah amarga dadi abot. Tresnane kaya obat. Aku guess sing aku kelalen aku duwe pilihan.

Item 1-1

Isi placeholder kanggo conto scrollspy. Iki ana hubungane karo item 1-1. Sampeyan entuk arsitektur paling apik. Perangko paspor, dheweke kosmopolitan. Apik, seger, galak, kita entuk kunci. Ora tau ngrancang yen sedina aku bakal kelangan sampeyan. Dheweke mangan atimu. Kiss sampeyan kosmik, saben gerakan iku sihir. Maksudku sing, maksudku kaya dheweke. Salam seduluran, ayo dolan. Mung duwe wengi kaya 4 Juli! Nanging sampeyan luwih seneng boroske.

Item 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

Isi placeholder kanggo conto scrollspy. Iki ana hubungane karo item 3-2. Sampeyan asli, ora bisa diganti. Sewengi padha dolanan, lagumu. Bocah-bocah wadon California sing ora bisa dipungkiri. Kaya manuk tanpa kurungan. Ora ana rasa wedi saiki, ayo lunga lan bebas, aku bakal tresna sampeyan tanpa syarat. Aku bisa ndeleng tulisan ing tembok. Sampeyan bisa lelungan ing donya nanging ora ana sing cedhak karo pesisir 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>

Conto karo dhaptar-grup

Scrollspy uga dianggo karo .list-groups. Gulung area ing jejere grup dhaptar lan nonton owah-owahan kelas sing aktif.

Item 1

Isi placeholder kanggo conto dhaptar-kelompok scrollspy. Iki ana hubungane karo item 1. Ora perlu njaluk ngapura. Ora ana rasa wedi saiki, ayo lunga lan bebas, aku bakal tresna sampeyan tanpa syarat. wingi malem jumat. Ojo dadi wong lanang sing isin, aku yakin yen ayu. Summer sawise SMA nalika kita pisanan ketemu. Amarga dheweke dadi muse lan seniman. opo? Ngenteni. Panginten aku iki pangecualian.

Item 2

Isi placeholder kanggo conto dhaptar-kelompok scrollspy. Iki ana hubungane karo item 2. Ya, dheweke njoget karo dheweke dhewe. Oh, ora. Sampeyan bisa dadi sing paling gedhe. Amarga, bayi, sampeyan minangka kembang api. Mungkin alesan kenapa kabeh lawang ditutup. Bukak atimu lan mung miwiti. Dadi très chic, ya, dheweke klasik.

Item 3

Isi placeholder kanggo conto dhaptar-kelompok scrollspy. Iki ana hubungane karo item 3. Kita pindhah luwih dhuwur lan luwih dhuwur. Ora ana siji tanpa liyane, kita nggawe perjanjian. Aku mlaku-mlaku ing udara. Ana sing ngomong yen tato sampeyan wis dibusak. Saiki aku ngambang kaya kupu. Nada, tan pas lan siap, nguripake munggah amarga dadi abot. Amarga yen sampeyan dadi duwekku, yen sampeyan dadi duwekku. Sampeyan mung kudu ngobong cahya lan supaya sumunar! Dadi kita tekan boulevard. Apa sampeyan tau ngrasa, rumangsa kertas tipis. Aku ndeleng kabeh, aku ndeleng saiki.

Item 4

Isi placeholder kanggo conto dhaptar-kelompok scrollspy. Iki ana hubungane karo item 4. Musim panas sawise SMA nalika pisanan ketemu. Ora ana rasa wedi saiki, ayo lunga lan bebas, aku bakal tresna sampeyan tanpa syarat. Kulit sing diambung srengenge panas banget, kita bakal nyawiji es loli sampeyan. Katresnan iki bakal nggawe sampeyan levitate.

<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>

Panggunaan

Liwat atribut data

Kanggo gampang nambah prilaku scrollspy kanggo pandhu arah topbar, nambah data-spy="scroll"menyang unsur sing pengin Spy (paling biasane iki bakal <body>). Banjur tambahake data-targetatribut karo ID utawa kelas unsur induk saka .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>

Liwat JavaScript

Sawise nambahake position: relative;CSS sampeyan, nelpon scrollspy liwat JavaScript:

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

Target ID sing bisa ditanggulangi dibutuhake

Tautan Navbar kudu duwe target id sing bisa ditanggulangi. Contone, <a href="#home">home</a>kudu cocog karo soko ing DOM kaya <div id="home"></div>.

Unsur non :visible-target diabaikan

unsur Doel sing ora :visiblemiturut jQuery bakal digatèkaké lan item nav sing cocog ora bakal disorot.

Metode

.scrollspy('refresh')

Nalika nggunakake scrollspy bebarengan karo nambah utawa mbusak unsur saka DOM, sampeyan kudu nelpon cara refresh kaya mangkene:

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

.scrollspy('dispose')

Ngancurake scrollspy unsur.

Pilihan

Opsi bisa dilewati liwat atribut data utawa JavaScript. Kanggo atribut data, tambahake jeneng pilihan menyang data-, kaya ing data-offset="".

jeneng Jinis Default Katrangan
ngimbangi nomer 10 Piksel kanggo ngimbangi saka ndhuwur nalika ngetung posisi gulung.
cara senar otomatis Nemokake bagean sing ana unsur spied. autobakal milih cara sing paling apik kanggo entuk koordinat gulung. offsetbakal nggunakake metode offset jQuery kanggo entuk koordinat gulung. positionbakal nggunakake cara posisi jQuery kanggo entuk koordinat gulung.
target senar | obyek jQuery | unsur DOM Nemtokake unsur kanggo aplikasi Scrollspy plugin.

Acara

Jinis Acara Katrangan
activate.bs.scrollspy Acara iki murub ing unsur gulung saben item anyar dadi diaktifake dening scrollspy ing. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})