in English

Scrollspy

Awtomatikong i-update ang Bootstrap navigation o ilista ang mga bahagi ng pangkat batay sa posisyon ng pag-scroll upang isaad kung aling link ang kasalukuyang aktibo sa viewport.

Paano ito gumagana

May ilang kinakailangan ang Scrollspy upang gumana nang maayos:

  • Kung binubuo mo ang aming JavaScript mula sa pinagmulan, nangangailanganutil.js ito ng .
  • Dapat itong gamitin sa isang Bootstrap nav component o list group .
  • Kinakailangan ng Scrollspy position: relative;ang elementong tinitiktikan mo, kadalasan ang <body>.
  • Kapag nag-espiya sa mga elemento maliban sa <body>, siguraduhing magkaroon ng isang heightset at overflow-y: scroll;inilapat.
  • Ang mga anchor ( <a>) ay kinakailangan at dapat tumuro sa isang elemento na may ganyan id.

Kapag matagumpay na naipatupad, ang iyong nav o list group ay mag-a-update nang naaayon, na inililipat ang .activeklase mula sa isang item patungo sa susunod batay sa kanilang nauugnay na mga target.

Halimbawa sa navbar

Mag-scroll sa lugar sa ibaba ng navbar at panoorin ang aktibong pagbabago ng klase. Ang mga dropdown na item ay iha-highlight din.

@mataba

Nilalaman ng placeholder para sa halimbawa ng scrollspy. Nakuha mo ang pinakamahusay na arkitektura. Passport stamps, she's cosmopolitan. Mabuti, sariwa, mabangis, nakuha namin ito sa lock. Hindi ko pinlano na balang araw ay mawala ka sa akin. Kinakain niya ang iyong puso. Ang iyong halik ay cosmic, bawat galaw ay magic. I mean yung mga yun, I mean parang siya yung. Pagbati mga mahal sa buhay maglakbay tayo. Pag-aari lamang ang gabi tulad ng ika-4 ng Hulyo! Pero mas gugustuhin mong masayang.

@mdo

Nilalaman ng placeholder para sa halimbawa ng scrollspy. Dahil siya ang muse at ang artista. (Ganito ang ginagawa namin) Kaya gusto mong maglaro ng mahika. Kaya siguraduhin mo lang bago mo ibigay lahat sa akin. Naglalakad ako, naglalakad ako sa hangin (ngayong gabi). Laktawan ang usapan, narinig ang lahat, oras na para maglakad.

isa

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

Nilalaman ng placeholder para sa halimbawa ng scrollspy. Kung gusto mong sumayaw, kung gusto mo ang lahat, alam mo na ako ang babaeng dapat mong tawagan. Maglakad sa bagyo na gagawin ko. Kaya hayaan mo akong isuot ka sa iyong birthday suit. Yung nakatakas. Last Friday night, yeah I think we broke the law, always say we're gonna stop. 'Dahil siya ay medyo ng Yoko, At siya ay isang maliit na bit ng 'Oh hindi'. Gusto ko ang panga droppin', eye poppin', head turnin', body shockin'. Oo, pinalaki namin ang aming mga credit card at pinaalis kami sa bar.

At ilang higit pang nilalaman ng placeholder, para sa mabuting sukat.

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

Halimbawa na may nested nav

Gumagana rin ang Scrollspy sa nested .navs. Kung ang isang nested .navay .active, ang mga magulang nito ay magiging .active. Mag-scroll sa lugar sa tabi ng navbar at panoorin ang aktibong pagbabago ng klase.

aytem 1

Nilalaman ng placeholder para sa halimbawa ng scrollspy. Ang isang ito ay nauugnay sa item 1. Nagdadala sa iyo ng milya-milya ang taas, napakataas, 'cause she's got that one international smile. May isang estranghero sa aking kama, may pumipintig sa aking ulo. Oh hindi. Sa ibang buhay ay gagawin kitang manatili. Ako kasi, kaya ko kahit ano. Angkop para sa aking koronang laban. Sanay magnakaw ng alak ng magulang mo at umakyat sa bubong. Tone, tan fit at ready, pataasin ito dahilan para mabigat ito. Ang pagmamahal niya ay parang droga. Nakalimutan ko yata na may choice ako.

Aytem 1-1

Nilalaman ng placeholder para sa halimbawa ng scrollspy. Ang isang ito ay nauugnay sa aytem 1-1. Nakuha mo ang pinakamahusay na arkitektura. Passport stamps, she's cosmopolitan. Mabuti, sariwa, mabangis, nakuha namin ito sa lock. Hindi ko pinlano na balang araw ay mawala ka sa akin. Kinakain niya ang iyong puso. Ang iyong halik ay cosmic, bawat galaw ay magic. I mean yung mga yun, I mean parang siya yung. Pagbati mga mahal sa buhay maglakbay tayo. Pag-aari lamang ang gabi tulad ng ika-4 ng Hulyo! Pero mas gugustuhin mong masayang.

Aytem 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

Nilalaman ng placeholder para sa halimbawa ng scrollspy. Ang isang ito ay nauugnay sa aytem 3-2. Ikaw ay orihinal, hindi maaaring palitan. Magdamag silang tumutugtog, iyong kanta. Mga batang taga-California, hindi kami maikakaila. Parang ibong walang hawla. Walang takot ngayon, bitawan mo at lumaya ka lang, mamahalin kita ng walang pasubali. Kitang kita ko ang nakasulat sa dingding. Maaari kang maglakbay sa mundo ngunit walang lalapit sa ginintuang baybayin.

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

Halimbawa na may list-group

Gumagana rin ang Scrollspy sa .list-groups. Mag-scroll sa lugar sa tabi ng listahan ng pangkat at panoorin ang aktibong pagbabago ng klase.

aytem 1

Nilalaman ng placeholder para sa halimbawa ng scrollspy list-group. Ang isang ito ay nauugnay sa item 1. Hindi kailangan ng paumanhin. Walang takot ngayon, bitawan mo at lumaya ka lang, mamahalin kita ng walang pasubali. Noong nakaraang Biyernes ng gabi. Don't be a shy kinda guy I'll bet it's beautiful. Summer after high school nung una tayong nagkakilala. Dahil siya ang muse at ang artista. Ano? Teka. Akala ko ako ang exception.

aytem 2

Nilalaman ng placeholder para sa halimbawa ng scrollspy list-group. Ang isang ito ay nauugnay sa item 2. Oo, sumasayaw siya sa sarili niyang beat. Oh hindi. Maaaring ikaw ang pinakamagaling. Dahil, baby, isa kang firework. Siguro dahilan kung bakit sarado lahat ng pinto. Buksan ang iyong puso at hayaang magsimula ito. So très chic, yeah, classic siya.

aytem 3

Nilalaman ng placeholder para sa halimbawa ng scrollspy list-group. Ang isang ito ay nauugnay sa aytem 3. Tataas tayo ng pataas. Never one without the other, we made a pact. Naglalakad ako sa hangin. May nagsabi na inalis mo ang iyong tattoo. Ngayon ay lumulutang ako na parang butterfly. Tone, tan fit at ready, pataasin ito dahilan para mabigat ito. Dahil kapag akin ka, kapag akin ka na. Kailangan mo lang mag-apoy ng ilaw at hayaan itong lumiwanag! Kaya dumaan kami sa boulevard. Nararamdaman mo ba, pakiramdam na napakanipis ng papel. Nakikita ko lahat, nakikita ko na ngayon.

aytem 4

Nilalaman ng placeholder para sa halimbawa ng scrollspy list-group. This one relates to item 4. Summer after high school nung una kaming nagkita. Walang takot ngayon, bitawan mo at lumaya ka lang, mamahalin kita ng walang pasubali. Napakainit ng balat na hinahalikan ng araw matutunaw namin ang iyong popsicle. Ang pag-ibig na ito ay magpapalutang sa iyo.

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

Paggamit

Sa pamamagitan ng mga katangian ng data

Upang madaling magdagdag ng scrollspy na gawi sa iyong topbar navigation, idagdag data-spy="scroll"sa elementong gusto mong tiktikan (kadalasan ay ito ang <body>). Pagkatapos ay idagdag ang data-targetattribute na may ID o klase ng parent element ng anumang .navbahagi ng 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>

Sa pamamagitan ng JavaScript

Pagkatapos idagdag position: relative;sa iyong CSS, tawagan ang scrollspy sa pamamagitan ng JavaScript:

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

Kinakailangan ang mga nareresolbang ID na target

Ang mga link sa Navbar ay dapat may mga nareresolbang id target. Halimbawa, ang isang ay <a href="#home">home</a>dapat na tumutugma sa isang bagay sa DOM tulad ng <div id="home"></div>.

Binalewala :visibleang mga hindi target na elemento

Ang mga target na elemento na hindi :visibleayon sa jQuery ay hindi papansinin at ang kanilang mga kaukulang nav item ay hindi kailanman mai-highlight.

Paraan

.scrollspy('refresh')

Kapag gumagamit ng scrollspy kasabay ng pagdaragdag o pag-alis ng mga elemento mula sa DOM, kakailanganin mong tawagan ang paraan ng pag-refresh tulad nito:

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

.scrollspy('dispose')

Sinisira ang scrollspy ng isang elemento.

Mga pagpipilian

Maaaring ipasa ang mga opsyon sa pamamagitan ng mga katangian ng data o JavaScript. Para sa mga katangian ng data, idagdag ang pangalan ng opsyon sa data-, tulad ng sa data-offset="".

Pangalan Uri Default Paglalarawan
offset numero 10 Mga pixel na i-offset mula sa itaas kapag kinakalkula ang posisyon ng scroll.
paraan string sasakyan Hahanapin kung saang seksyon naroroon ang spied element. autopipiliin ang pinakamahusay na paraan upang makakuha ng mga scroll coordinates. offsetgagamit ng jQuery offset method para makakuha ng scroll coordinates. positiongagamit ng jQuery position method para makakuha ng scroll coordinates.
target string | jQuery object | DOM na elemento Tinutukoy ang elementong ilalapat ng Scrollspy plugin.

Mga kaganapan

Uri ng kaganapan Paglalarawan
activate.bs.scrollspy Ang kaganapang ito ay gumagana sa scroll element sa tuwing may bagong item na na-activate ng scrollspy. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})