in English

Scrollspy

Awtomatikong i-update ang Bootstrap navigation o ilista ang mga component sa grupo base sa posisyon sa scroll aron ipakita kung unsang link ang aktibo karon sa viewport.

Giunsa kini paglihok

Ang Scrollspy adunay pipila ka mga kinahanglanon aron molihok sa hustong paagi:

  • Kung nagtukod ka sa among JavaScript gikan sa gigikanan, kinahanglan kiniutil.js .
  • Kinahanglan kini gamiton sa usa ka Bootstrap nav component o list group .
  • Ang Scrollspy nagkinahanglan position: relative;sa elemento nga imong gipanid-an, kasagaran ang <body>.
  • Kung nang-espiya sa mga elemento gawas sa <body>, siguroha nga adunay usa ka heightset ug overflow-y: scroll;magamit.
  • Ang mga angkla ( <a>) gikinahanglan ug kinahanglang magpunting sa usa ka elemento uban niana id.

Kung malampuson nga gipatuman, ang imong nav o lista nga grupo mag-update sumala niana, ibalhin ang .activeklase gikan sa usa ka butang ngadto sa sunod base sa ilang kauban nga mga target.

Pananglitan sa navbar

I-scroll ang dapit ubos sa navbar ug tan-awa ang aktibong kausaban sa klase. Ang dropdown nga mga butang i-highlight usab.

@tambok

Ang sulud sa placeholder alang sa pananglitan sa scrollspy. Nakuha nimo ang labing kaayo nga arkitektura. Mga selyo sa pasaporte, cosmopolitan siya. Maayo, presko, mabangis, nakuha namo kini sa lock. Wala gyud ko nagplano nga usa ka adlaw mawala ka nako. Gikaon niya ang imong kasingkasing. Ang imong halok kay kosmiko, matag lihok kay magic. I mean the ones, I mean murag siya ra. Pagpangumusta mga minahal magbiyahe ta. Tag-iya lang ang gabii sama sa ika-4 sa Hulyo! Pero mas gusto nimo nga masayang.

@mdo

Ang sulud sa placeholder alang sa pananglitan sa scrollspy. 'Tungod kay siya ang muse ug ang artista. (Kini ang among buhaton) Mao nga gusto nimo nga magdula og salamangka. So sure lang before nimo ihatag nako tanan. Naglakaw ko, naglakaw ko sa hangin (karong gabii). Laktawan ang pakigpulong, paminawa ang tanan, panahon sa paglakaw.

sa usa ka

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

Ang sulud sa placeholder alang sa pananglitan sa scrollspy. Kung gusto nimo sayaw, kung gusto nimo ang tanan, nahibal-an nimo nga ako ang babaye nga kinahanglan nimo nga tawagan. Lakaw latas sa unos nga akong buhaton. Busa pakuhaa ko nimo sa imong birthday suit. Ang nagpalayo. Kaniadtong Biyernes sa gabii, oo sa akong hunahuna nakalapas kami sa balaod, kanunay isulti nga mohunong kami. 'Tungod kay siya usa ka gamay nga Yoko, Ug siya usa ka gamay nga 'Oh dili'. Gusto nako ang jaw droppin ', eye poppin', head turnin', body shockin'. Oo, gipataas namo ang among mga credit card ug gipapahawa sa bar.

Ug pipila pa nga sulud sa placeholder, alang sa maayong sukod.

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

Pananglitan nga adunay nested nav

Scrollspy usab nagtrabaho uban sa nested .navs. Kung ang usa ka salag .nav, .activeang mga ginikanan niini usab .active. Pag-scroll sa lugar tapad sa navbar ug tan-awa ang aktibo nga pagbag-o sa klase.

aytem 1

Ang sulud sa placeholder alang sa pananglitan sa scrollspy. Kini nga usa adunay kalabutan sa aytem 1. Nagdala kanimo mga milya nga taas, taas kaayo, tungod kay siya adunay usa ka internasyonal nga pahiyom. Adunay usa ka estranghero sa akong higdaanan, adunay usa ka pagbunal sa akong ulo. Oh, dili. Sa laing kinabuhi ipabilin ko ikaw. Kay ako, kaya nako ang bisan unsa. Nahiangay alang sa akong korona nga away. Kaniadto mangawat og ilimnon sa imong ginikanan ug mosaka sa atop. Ang tono, tan nga angay ug andam, ipataas kini hinungdan nga mabug-at kini. Ang iyang gugma sama sa usa ka droga. Nalimot ko nga naa koy choice.

Butang 1-1

Ang sulud sa placeholder alang sa pananglitan sa scrollspy. Kini may kalabotan sa aytem 1-1. Nakuha nimo ang labing kaayo nga arkitektura. Mga selyo sa pasaporte, cosmopolitan siya. Maayo, presko, mabangis, nakuha namo kini sa lock. Wala gyud ko nagplano nga usa ka adlaw mawala ka nako. Gikaon niya ang imong kasingkasing. Ang imong halok kay kosmiko, matag lihok kay magic. I mean the ones, I mean murag siya ra. Pagpangumusta mga minahal magbiyahe ta. Tag-iya lang ang gabii sama sa ika-4 sa Hulyo! Pero mas gusto nimo nga masayang.

Butang 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

Ang sulud sa placeholder alang sa pananglitan sa scrollspy. Kini may kalabotan sa aytem 3-2. Original ka, dili pwede ilisan. Tibuok gabii sila nagtugtog, imong kanta. Mga babaye sa California dili kami ikalimod. Sama sa langgam nga walay halwa. Wala nay kahadlok karon, pasagdi ug gawasnon lang, higugmaon ko ikaw nga walay kondisyon. Nakita nako ang sinulat sa dingding. Mahimo kang mobiyahe sa kalibutan apan walay makaduol sa bulawanong baybayon.

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

Pananglitan sa listahan-grupo

Scrollspy usab nagtrabaho uban sa .list-groups. I-scroll ang dapit tapad sa listahan nga grupo ug tan-awa ang aktibong kausaban sa klase.

aytem 1

Ang sulod sa placeholder alang sa scrollspy list-group nga pananglitan. Kini nga usa may kalabutan sa aytem 1. Dili kinahanglan nga mangayo og pasaylo. Wala nay kahadlok karon, pasagdi ug gawasnon lang, higugmaon ko ikaw nga walay kondisyon. Niadtong Biyernes sa gabii. Don't be a shy kinda guy I'll bet gwapa. Summer human sa high school sa dihang nagkita mi. 'Tungod kay siya ang muse ug ang artista. Unsa? Paghulat. Naghunahuna nga ako ang eksepsiyon.

aytem 2

Ang sulod sa placeholder alang sa scrollspy list-group nga pananglitan. Kini nga usa may kalabutan sa aytem 2. Oo, siya mosayaw sa iyang kaugalingon nga beat. Oh, dili. Mahimong ikaw ang labing dako. 'Tungod kay, bata, ikaw usa ka pabuto. Tingali usa ka hinungdan ngano nga ang tanan nga mga pultahan sirado. Ablihi ang imong kasingkasing ug sugdi lang kini. So très chic, oo, classic siya.

aytem 3

Ang sulod sa placeholder alang sa scrollspy list-group nga pananglitan. Kini nga usa may kalabutan sa aytem 3. Kita moadto sa mas taas ug mas taas. Wala gyud usa nga wala ang usa, naghimo kami usa ka kasabutan. Naglakaw ko sa hangin. Adunay miingon nga imong gikuha ang imong tattoo. Karon naglutaw na ko sama sa alibangbang. Ang tono, tan nga angay ug andam, ipataas kini hinungdan nga mabug-at kini. Tungod kay sa higayon nga akoa ka, sa higayon nga ikaw akoa. Kinahanglan nimo nga pasigaon ang suga ug pasagdan kini! So naa mi sa boulevard. Nabati ba nimo, gibati nga nipis kaayo ang papel. Nakita nako ang tanan, nakita nako kini karon.

aytem 4

Ang sulod sa placeholder alang sa scrollspy list-group nga pananglitan. This one relate to item 4. Summer after high school sa una namong pagkita. Wala nay kahadlok karon, pasagdi ug gawasnon lang, higugmaon ko ikaw nga walay kondisyon. Ang panit nga gihagkan sa adlaw init kaayo matunaw namo ang imong popsicle. Kini nga gugma makapahimo kanimo sa paglutaw.

<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

Pinaagi sa data attributes

Aron dali nga makadugang sa scrollspy nga kinaiya sa imong topbar navigation, idugang data-spy="scroll"sa elemento nga gusto nimong espiya (kasagaran kini mao ang <body>). Dayon idugang ang data-targetattribute nga adunay ID o klase sa ginikanan nga elemento sa bisan unsang .navbahin sa 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>

Pinaagi sa JavaScript

Human sa pagdugang position: relative;sa imong CSS, tawga ang scrollspy pinaagi sa JavaScript:

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

Kinahanglan nga masulbad ang mga target sa ID

Ang mga link sa Navbar kinahanglan adunay masulbad nga mga target sa id. Pananglitan, <a href="#home">home</a>kinahanglan nga katumbas sa usa ka butang sa DOM sama sa <div id="home"></div>.

Ang dili target :visiblenga mga elemento gibalewala

Ang mga target nga elemento nga dili :visiblesumala sa jQuery ibaliwala ug ang ilang mga katugbang nga nav nga mga butang dili gyud ma-highlight.

Pamaagi

.scrollspy('refresh')

Kung gigamit ang scrollspy kauban ang pagdugang o pagtangtang sa mga elemento gikan sa DOM, kinahanglan nimo nga tawagan ang pamaagi sa pag-refresh sama niini:

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

.scrollspy('dispose')

Makaguba sa scrollspy sa usa ka elemento.

Mga kapilian

Mahimong ipasa ang mga kapilian pinaagi sa data attributes o JavaScript. Para sa data attributes, idugang ang opsyon nga ngalan sa data-, sama sa data-offset="".

Ngalan Matang Default Deskripsyon
offset numero 10 Ang mga pixel aron ma-offset gikan sa taas kung kalkulado ang posisyon sa scroll.
pamaagi hilo awto Ang pagpangita kung asa nga seksyon ang gipanid-an nga elemento auto. offsetmogamit sa jQuery offset nga pamaagi aron makakuha og scroll coordinates. positiongamiton ang pamaagi sa posisyon sa jQuery aron makakuha og mga scroll coordinates.
target hilo | jQuery butang | DOM nga elemento Gipiho ang elemento aron magamit ang Scrollspy plugin.

Mga panghitabo

Uri sa Hitabo Deskripsyon
activate.bs.scrollspy Kini nga panghitabo nagdilaab sa scroll nga elemento sa matag higayon nga ang usa ka bag-ong butang ma-activate sa scrollspy. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})