in English

Scrollspy

Ngamutahirkeun otomatis navigasi Bootstrap atanapi daptar komponén grup dumasar kana posisi gulung pikeun nunjukkeun link mana nu ayeuna aktip dina viewport nu.

Kumaha gawéna

Scrollspy gaduh sababaraha sarat pikeun fungsina leres:

  • Upami anjeun nuju ngawangun JavaScript kami tina sumber, peryogiutil.js .
  • Éta kedah dianggo dina komponén nav Bootstrap atanapi grup daptar .
  • Scrollspy merlukeun position: relative;unsur nu nuju spionase, biasana dina <body>.
  • Nalika spionase on elemen lian ti éta <body>, pastikeun gaduh heightset sarta overflow-y: scroll;dilarapkeun.
  • Jangkar ( <a>) diwajibkeun sareng kedah nunjuk ka unsur anu aya id.

Nalika hasil dilaksanakeun, nav Anjeun atawa daptar grup bakal ngamutahirkeun sasuai, pindah .activekelas ti hiji item ka hareup dumasar kana target pakait.

Contona dina navbar

Gulung wewengkon handap navbar jeung lalajo robah kelas aktip. Item dropdown bakal disorot ogé.

@gajih

Eusi placeholder pikeun conto scrollspy. Anjeun ngagaduhan arsitéktur anu pangsaéna. Perangko paspor, anjeunna kosmopolitan. Rupa, seger, galak, kami ngagaduhan konci. Teu pernah ngarencanakeun yén hiji poé kuring bakal kaleungitan anjeun. Manehna eats haté anjeun kaluar. Ciuman anjeun kosmik, unggal gerakan mangrupikeun sihir. Maksud kuring nu leuwih, maksud kuring kawas manéhna nu hiji. Salam sayang hayu urang jalan-jalan. Ngan sorangan peuting kawas 4 Juli! Tapi anjeun langkung resep dibuang.

@mdo

Eusi placeholder pikeun conto scrollspy. Kusabab anjeunna muse sareng seniman. (Ieu kumaha urang ngalakukeun) Janten anjeun hoyong maén sihir. Janten pastikeun sateuacan anjeun masihan sadayana ka kuring. Kuring leumpang, kuring leumpang dina hawa (wengi). Leumpang omongan, kadéngé kabéh, waktuna leumpang leumpang.

hiji

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

Eusi placeholder pikeun conto scrollspy. Upami anjeun hoyong nari, upami anjeun hoyong sadayana, anjeun terang yén kuring awéwé anu anjeun kedah telepon. Leumpang ngaliwatan badai kuring bakal. Janten hayu atuh kéngingkeun anjeun dina jas ulang taun anjeun. Hiji anu leupas. Malem Jumaah kamari, hehehehe urang ngalanggar hukum, sok nyebutkeun urang gonna eureun. 'Sabab anjeunna sakedik Yoko, Sareng anjeunna sakedik 'Oh henteu'. Abdi hoyong rahang droppin ', panon poppin', sirah turnin ', awak shockin'. Leres, urang maksimalkeun kartu kiridit sareng ditajong kaluar tina bar.

Jeung sababaraha eusi placeholder langkung, pikeun ukuran alus.

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

Contona jeung nav nested

Scrollspy ogé jalan kalawan nested .navs. Lamun sarang .navtéh .active, kolotna ogé bakal .active. Gulung wewengkon gigireun navbar jeung lalajo robah kelas aktip.

Barang 1

Eusi placeholder pikeun conto scrollspy. Hiji ieu relates to item 1. Butuh anjeun mil tinggi, jadi luhur, 'sabab manehna boga nu hiji seuri internasional. Aya urang asing dina ranjang abdi, aya pounding dina sirah kuring. Oh, henteu. Dina kahirupan anu sanés kuring bakal ngajantenkeun anjeun cicing. Kusabab kuring, kuring sanggup naon waé. Cocog pikeun perang mahkota kuring. Dipaké maok arak kolot jeung naék kana tajug. Nada, tan pas sareng siap, hurungkeun sabab janten beurat. Cintana ibarat ubar. Kuring nebak yén kuring poho kuring kungsi pilihan.

Item 1-1

Eusi placeholder pikeun conto scrollspy. Ieu aya hubunganana sareng item 1-1. Anjeun ngagaduhan arsitéktur anu pangsaéna. Perangko paspor, anjeunna kosmopolitan. Rupa, seger, galak, kami ngagaduhan konci. Teu pernah ngarencanakeun yén hiji poé kuring bakal kaleungitan anjeun. Manehna eats haté anjeun kaluar. Ciuman anjeun kosmik, unggal gerakan mangrupikeun sihir. Maksud kuring nu leuwih, maksud kuring kawas manéhna nu hiji. Salam sayang hayu urang jalan-jalan. Ngan sorangan peuting kawas 4 Juli! Tapi anjeun langkung resep dibuang.

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

Eusi placeholder pikeun conto scrollspy. Ieu aya hubunganana sareng item 3-2. Anjeun asli, teu tiasa diganti. Sapeuting aranjeunna nuju maén, lagu anjeun. katresna California urang geus undeniable. Kawas manuk tanpa kurung. Teu aya kasieun ayeuna, hayu sareng janten gratis, kuring bakal bogoh ka anjeun tanpa syarat. Abdi tiasa ningali tulisan dina témbok. Anjeun tiasa ngarambat dunya tapi teu aya anu caket sareng basisir 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>

Contona jeung daptar-grup

Scrollspy ogé jalan kalawan .list-groups. Gulung wewengkon gigireun grup daptar tur lalajo robah kelas aktip.

Barang 1

Eusi placeholder pikeun conto daptar-grup scrollspy. Ieu aya hubunganana sareng item 1. Teu kedah hapunten. Teu aya kasieun ayeuna, hayu sareng janten gratis, kuring bakal bogoh ka anjeun tanpa syarat. Jumat wengi terahir. Tong isin kinda guy atuh bet geulis. Summer sanggeus SMA nalika urang munggaran patepung. Kusabab anjeunna muse sareng seniman. Naon? Antosan. Panginten kuring éta iwal.

Barang 2

Eusi placeholder pikeun conto daptar-grup scrollspy. Ieu aya hubunganana sareng item 2. Hehehehe, anjeunna nari kana ketukan sorangan. Oh, henteu. Anjeun tiasa anu pangsaéna. 'Sabab, orok, anjeun kembang api. Meureun alesan naha sakabéh panto ditutup. Buka haté anjeun sarta ngan hayu eta dimimitian. Janten très chic, nuhun, anjeunna klasik.

Barang 3

Eusi placeholder pikeun conto daptar-grup scrollspy. Ieu relates to item 3. Urang balik luhur jeung luhur. Henteu aya hiji tanpa anu sanés, kami ngadamel pakta. Kuring leumpang dina hawa. Aya anu nyarios yén tato anjeun dihapus. Ayeuna kuring ngambang kawas kukupu. Nada, tan pas sareng siap, hurungkeun sabab janten beurat. Cukang lantaran sakali anjeun milik kuring, sakali anjeun milik kuring. Anjeun ngan kedah ngahurungkeun lampu sarta ngantep éta caang! Ku kituna urang pencét boulevard. Dupi anjeun kantos ngarasa, ngarasa jadi kertas ipis. Kuring ningali éta sadayana, kuring ningali ayeuna.

barang 4

Eusi placeholder pikeun conto daptar-grup scrollspy. Ieu relates to item 4. Summer sanggeus SMA nalika urang munggaran patepung. Teu aya kasieun ayeuna, hayu sareng janten gratis, kuring bakal bogoh ka anjeun tanpa syarat. Kulit dicium panonpoé jadi panas kami bakal ngalembereh popsicle Anjeun. cinta ieu bakal ngajadikeun anjeun 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>

Pamakéan

Via atribut data

Pikeun gampang nambahkeun kabiasaan scrollspy kana navigasi topbar Anjeun, tambahkeun data-spy="scroll"ka elemen rék nénjo dina (paling ilaharna ieu bakal jadi <body>). Teras tambahkeun data-targetatribut sareng ID atanapi kelas unsur indung tina .navkomponén 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>

Ngaliwatan JavaScript

Saatos nambahkeun position: relative;kana CSS anjeun, nelepon scrollspy via JavaScript:

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

target ID resolvable diperlukeun

Tumbu Navbar kudu boga target id resolvable. Contona, hiji <a href="#home">home</a>kudu pakait jeung hal di DOM kawas <div id="home"></div>.

Unsur non- :visibletarget teu dipalire

elemen target nu teu :visiblenurutkeun jQuery bakal dipaliré jeung item nav saluyu maranéhna bakal pernah disorot.

Métode

.scrollspy('refresh')

Nalika nganggo scrollspy sareng nambihan atanapi ngahapus unsur tina DOM, anjeun kedah nyauran metode refresh sapertos kieu:

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

.scrollspy('dispose')

Ngancurkeun scrollspy unsur urang.

Pilihan

Pilihan bisa diliwatan via atribut data atawa JavaScript. Pikeun atribut data, tambahkeun nami pilihan ka data-, sapertos dina data-offset="".

Ngaran Tipe Default Katerangan
ngimbangan angka 10 Piksel pikeun ngimbangan ti luhur nalika ngitung posisi ngagugulung.
métode senar otomatis Milarian bagian mana anu aya unsur spied. autoBakal milih metodeu anu pangsaéna pikeun kéngingkeun koordinat ngagulung. offsetbakal ngagunakeun métode offset jQuery pikeun meunangkeun koordinat ngagugulung. positionbakal ngagunakeun métode posisi jQuery pikeun meunangkeun koordinat ngagugulung.
udagan string | objék jQuery | unsur DOM Nangtukeun elemen pikeun nerapkeun Scrollspy plugin.

Kajadian

Jenis Acara Katerangan
activate.bs.scrollspy Ieu acara seuneu dina unsur ngagugulung iraha wae hiji item anyar jadi diaktipkeun ku scrollspy nu. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})