in English

Scrollspy

Otomatikman mete ajou navigasyon Bootstrap oswa lis eleman gwoup ki baze sou pozisyon woulo liv la pou endike ki lyen ki aktif kounye a nan fenèt la.

Ki jan li fonksyone

Scrollspy gen kèk kondisyon pou fonksyone byen:

  • Si w ap konstwi JavaScript nou an soti nan sous, li mande pouutil.js .
  • Li dwe itilize sou yon eleman nav Bootstrap oswa yon gwoup lis .
  • Scrollspy mande position: relative;sou eleman w ap espyonaj la, anjeneral, <body>.
  • Lè espyonaj sou eleman lòt pase a <body>, asire w ke ou gen yon heightseri ak overflow-y: scroll;aplike.
  • Yo mande lank ( <a>) epi yo dwe montre yon eleman ki gen sa id.

Lè yo aplike avèk siksè, nav oswa gwoup lis ou a pral mete ajou kòmsadwa, deplase .activeklas la soti nan yon atik nan yon lòt ki baze sou objektif ki asosye yo.

Egzanp nan navbar

Scroll zòn ki anba a navbar epi gade chanjman nan klas aktif. Atik dropdown yo pral make tou.

@grès

Kontni anplasman pou egzanp scrollspy la. Ou gen pi bon achitekti. Tenm paspò, li se kosmopolit. Amann, fre, feròs, nou jwenn li sou fèmen. Pa janm planifye ke yon jou mwen ta pral pèdi ou. Li manje kè ou soti. Bo ou se cosmic, chak mouvman se majik. Mwen vle di yo, mwen vle di tankou li se youn nan. Bonjou mezanmi ann fè yon vwayaj. Jis posede nwit la tankou 4 jiyè! Men, ou ta pito jwenn gaspiye.

@mdo

Kontni anplasman pou egzanp scrollspy la. Paske li se miz la ak atis la. (Sa a se ki jan nou fè) Se konsa, ou vle jwe ak maji. Se konsa jis asire w anvan ou ban mwen tout bagay. M'ap mache, m'ap mache sou lè (aswè a). Sote pale a, tande tout bagay, tan pou mache mache a.

youn

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

Kontni anplasman pou egzanp scrollspy la. Si ou vle danse, si ou vle tout bagay, ou konnen ke mwen se ti fi ou ta dwe rele. Mache nan tanpèt la mwen ta. Se konsa, kite m mete ou nan kostim anivèsè nesans ou. Sila ki te ale. Vandredi dènye swa, wi mwen panse ke nou vyole lalwa, toujou di nou pral sispann. 'Paske li se yon ti kras nan Yoko, epi li se yon ti kras nan 'Oh non'. Mwen vle machwè a droppin ', je poppin ', tèt vire, kò chokan '. Yeah, nou maxed kat kredi nou yo epi yo te mete deyò nan ba a.

Ak kèk plis kontni anplasman, pou bon mezi.

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

Egzanp ak enbrike nav

Scrollspy travay tou ak .navs enbrike. Si yon enbrike .navse .active, paran li yo pral tou .active. Scroll zòn nan akote navbar la epi gade chanjman nan klas aktif.

Atik 1

Kontni anplasman pou egzanp scrollspy la. Yon sèl sa a gen rapò ak atik 1. Pran ou mil segondè, tèlman wo, paske li te gen yon souri entènasyonal sa a. Gen yon etranje nan kabann mwen, gen yon bat nan tèt mwen. Oh, non. Nan yon lòt vi mwen ta fè ou rete. Paske mwen, mwen kapab anyen. Suiting moute pou batay kouwòn mwen an. Yo itilize yo vòlè likè paran ou yo ak monte sou do kay la. Ton, tan anfòm ak pare, vire l 'leve lakòz li vin lou. Lanmou li se tankou yon dwòg. Mwen devine ke mwen bliye mwen te gen yon chwa.

Atik 1-1

Kontni anplasman pou egzanp scrollspy la. Sa a gen rapò ak atik 1-1 la. Ou gen pi bon achitekti. Tenm paspò, li se kosmopolit. Amann, fre, feròs, nou jwenn li sou fèmen. Pa janm planifye ke yon jou mwen ta pral pèdi ou. Li manje kè ou soti. Bo ou se cosmic, chak mouvman se majik. Mwen vle di yo, mwen vle di tankou li se youn nan. Bonjou mezanmi ann fè yon vwayaj. Jis posede nwit la tankou 4 jiyè! Men, ou ta pito jwenn gaspiye.

Atik 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

Kontni anplasman pou egzanp scrollspy la. Sa a gen rapò ak atik 3-2. Ou orijinal, ou pa ka ranplase. Tout nwit lan yo ap jwe, chante ou. Ti fi Kalifòni nou pa nye. Tankou yon zwazo san yon kaj. Pa gen okenn pè kounye a, kite ale epi jis dwe gratis, mwen pral renmen ou san kondisyon. Mwen ka wè ekriti sou miray la. Ou ta ka vwayaje nan mond lan men pa gen anyen ki rive pre kòt an lò.

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

Egzanp ak gwoup lis

Scrollspy travay tou ak .list-groups. Scroll zòn ki akote gwoup lis la epi gade chanjman nan klas aktif.

Atik 1

Kontni anplasman pou egzanp lis-gwoup scrollspy la. Yon sèl sa a gen rapò ak atik 1. Pa bezwen ekskiz. Pa gen okenn pè kounye a, kite ale epi jis dwe gratis, mwen pral renmen ou san kondisyon. Vandredi pase swa. Ou pa bezwen timid, mwen pral parye li bèl. Ete apre lekòl segondè lè nou te rankontre premye. Paske li se miz la ak atis la. Kisa? Tann. Te panse ke mwen te eksepsyon an.

Atik 2

Kontni anplasman pou egzanp lis-gwoup scrollspy la. Yon sèl sa a gen rapò ak atik 2. Yeah, li danse nan pwòp bat li. Oh, non. Ou ta ka pi gran an. 'Paske, ti bebe, ou se yon fedatifis. Petèt yon rezon ki fè tout pòt yo fèmen. Louvri kè ou epi jis kite l kòmanse. Se konsa, trè chik, wi, li se yon klasik.

Atik 3

Kontni anplasman pou egzanp lis-gwoup scrollspy la. Yon sèl sa a gen rapò ak atik 3. Nou ale pi wo ak pi wo. Pa janm youn san lòt, nou te fè yon pak. Mwen ap mache sou lè. Yon moun te di ou te retire tatoo ou. Kounye a mwen ap flote tankou yon papiyon. Ton, tan anfòm ak pare, vire l 'leve lakòz li vin lou. Kòz yon fwa ou se pou mwen, yon fwa ou se pou mwen. Ou jis oblije limen limyè a epi kite l klere! Se konsa nou frape boulva a. Èske w janm santi w, santi w konsa papye mens. Mwen wè li tout, mwen wè li kounye a.

Atik 4

Kontni anplasman pou egzanp lis-gwoup scrollspy la. Sa a gen rapò ak atik 4. Ete apre lekòl segondè lè nou te rankontre premye. Pa gen okenn pè kounye a, kite ale epi jis dwe gratis, mwen pral renmen ou san kondisyon. Solèy bo po tèlman cho nou pral fonn popsicle ou. Lanmou sa a pral fè ou leve.

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

Itilizasyon

Via atribi done yo

Pou ajoute fasilman konpòtman scrollspy nan navigasyon topbar ou a, ajoute data-spy="scroll"nan eleman ou vle al rekonèt (pi tipikman sa a ta dwe <body>). Lè sa a, ajoute data-targetatribi a ak ID oswa klas eleman paran nenpòt .naveleman 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>

Via JavaScript

Apre w fin ajoute position: relative;CSS ou a, rele scrollspy via JavaScript:

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

Objektif ID ki ka rezoud yo mande yo

Lyen Navbar yo dwe gen sib id ki ka rezoud. Pou egzanp, yon <a href="#home">home</a>dwe koresponn ak yon bagay nan DOM la tankou <div id="home"></div>.

Eleman ki pa :visiblesib yo inyore

Eleman sib ki pa :visibledapre jQuery yo pral inyore ak atik nav korespondan yo p ap janm make.

Metòd

.scrollspy('refresh')

Lè w ap itilize scrollspy ansanm ak ajoute oswa retire eleman nan DOM, w ap bezwen rele metòd rafrechisman an konsa:

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

.scrollspy('dispose')

Detwi scrollspy yon eleman.

Opsyon

Opsyon yo ka pase atravè atribi done oswa JavaScript. Pou atribi done, ajoute non opsyon a nan data-, tankou nan data-offset="".

Non Kalite Default Deskripsyon
konpanse nimewo 10 Piksèl pou konpanse nan tèt lè w ap kalkile pozisyon woulo liv la.
metòd fisèl oto Jwenn nan ki seksyon eleman espyon an ye. autopral chwazi pi bon metòd pou jwenn kowòdone woulo liv la. offsetpral itilize metòd konpanse jQuery pou jwenn kowòdone woulo liv. positionpral sèvi ak metòd pozisyon jQuery pou jwenn kowòdone woulo liv.
sib fisèl | jQuery objè | Eleman DOM Espesifye eleman pou aplike Plugin Scrollspy.

Evènman

Kalite Evènman Deskripsyon
active.bs.scrollspy Evènman sa a dife sou eleman woulo liv la chak fwa yon nouvo atik vin aktive pa scrollspy la. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})