in English

Skrol dɛn we de na di skrol

Ɔtomɛtik ɔpdet Bootstrap nevigishɔn ɔ list grup kɔmpɔnɛnt dɛn bays pan skrol pozishɔn fɔ sho us link de aktiv naw na di viupɔt.

Aw i de wok

Scrollspy gɛt sɔm tin dɛn we yu nid fɔ du fɔ mek i wok fayn fayn wan:

  • If yu de bil wi JavaSkript frɔm sɔs, i nid fɔutil.js .
  • I fɔ yuz pan wan Bootstrap nav kɔmpɔnɛnt ɔ list grup .
  • Scrollspy nid position: relative;pan di elemɛnt we yu de spay pan, bɔku tɛm di <body>.
  • We yu de spay pan ɛlimɛnt dɛn we nɔto di <body>, mek shɔ se yu gɛt heightsɛt ɛn overflow-y: scroll;yuz am.
  • Anka ( <a>) nid ɛn dɛn fɔ pɔynt to wan ɛlimɛnt wit dat id.

We dɛn dɔn impruv am fayn fayn wan, yu nav ɔ list grup go ɔpdet akɔdin to dat, ɛn dɛn go muv di .activeklas frɔm wan tin to di ɔda wan bay di tin dɛn we dɛn want fɔ du wit dɛn.

Ɛgzampul na navbar

Skrol di eria we de dɔŋ di navbar ɛn wach di aktif klas chenj. Di tin dɛn we de dɔŋ go aylayt bak.

@bɔmp

Pleshɔlda kɔntinyu fɔ di skrolspy ɛgzampul. Yu bin gɛt di bɛst akitɛkɛt. Paspɔt stamp, na kɔsmopɔlit. Fayn, fresh, faya, wi get am pan lok. Neva plan se wan de a go de los yu. I de it yu at kɔmɔt. Yu kis na kosmik, evri muv na majik. I min di wan dɛn, a min lɛk se na di wan. Gritin di wan dɛn we wi lɛk lɛ wi tek wan joyn. Jɔs ɔna di nɛt lɛk di 4 dez insay Julay! Bɔt yu go lɛk fɔ west.

@mdo na @mdo

Pleshɔlda kɔntinyu fɔ di skrolspy ɛgzampul. 'Cause na di muse en di artist.' (Dis is how we do) So yu wanna pley wit majik. So jɔs mek shɔ bifo yu gi mi ɔltin. A de waka, a de waka pan air (tunayt). Skip di tɔk, yɛri am ɔl, tɛm fɔ waka di waka.

wan

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

Pleshɔlda kɔntinyu fɔ di skrolspy ɛgzampul. If yu wanna dance, if yu wan it ol, yu no se mi na di gyal we yu fɔ kɔl. Wok tru di storm we a go du. So mek a put yu insay yu batde sus. Di wan we bin rɔnawe. Las Fraide nait, yeah a tink se wi brok di law, olwes se wi go stop. 'Cause shi na likl bit of Yoko, En shi na likl bit of 'Oh no'. I wan di jaw droppin', ay poppin', ed turnin', bodi shockin'. Yea, wi max wi kredit kad en geht kik aut na di bar.

Ɛn sɔm mɔ pleshɔlda kɔntinyu, fɔ gud mɛzhɔ.

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

Example wit nested nav

Scrollspy de wok bak wit nested .navs. If wan nest .navde .active, in mama ɛn papa dɛnsɛf go bi .active. Skrol di eria nia di navbar ɛn wach di aktif klas chenj.

Aytem 1 we de sho aw fɔ du dat

Pleshɔlda kɔntinyu fɔ di skrolspy ɛgzampul. Dis wan de riliet to aytem 1. Tek yu mayl hai, so hai, 'cos shi get dat wan intanashona smayl. Wan strenja de na mi bed, wan paund de na mi ed. Oh, nɔto so. Na ɔda layf a go mek yu de de. ‘Couse mi, a ebul fɔ du ɛnitin. Suiting up fɔ mi krawn batɛl. Yus fɔ tif yu mama ɛn papa dɛn rɔm ɛn klaym go na di ruf. Tone, tan fit en redi, turn it up cause its gettin' hevi. In lɔv tan lɛk drɔgs. A tink se a fɔgɛt se a gɛt fɔ disayd fɔ du sɔntin.

Aytem 1-1 we de sho aw fɔ du dis

Pleshɔlda kɔntinyu fɔ di skrolspy ɛgzampul. Dis wan gɛt fɔ du wit di aytem 1-1. Yu bin gɛt di bɛst akitɛkɛt. Paspɔt stamp, na kɔsmopɔlit. Fayn, fresh, faya, wi get am pan lok. Neva plan se wan de a go de los yu. I de it yu at kɔmɔt. Yu kis na kosmik, evri muv na majik. I min di wan dɛn, a min lɛk se na di wan. Gritin di wan dɛn we wi lɛk lɛ wi tek wan joyn. Jɔs ɔna di nɛt lɛk di 4 dez insay Julay! Bɔt yu go lɛk fɔ west.

Aytem 1-2 we de sho aw fɔ du dat

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

Pleshɔlda kɔntinyu fɔ di skrolspy ɛgzampul. Dis wan gɛt fɔ du wit aytem 3-2. Yu na orijinal, yu nɔ go ebul fɔ riples yu. Ɔl nɛt dɛn de ple, yu siŋ. Kalifonia gyal pikin dɛn wi nɔ de dinay. Lɛk bɔd we nɔ gɛt kech. No frayd de naw, let go en jos bi fri, a go laik yu unconditionally. A kin si di raytin we de na di wɔl. Yu kin travul di wɔl bɔt natin nɔ de kam nia di golden kɔst.

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

Ɛgzampul wit list-grup

Scrollspy de wok bak wit .list-groups. Skrol di eria nia di list grup ɛn wach di aktif klas chenj.

Aytem 1 we de sho aw fɔ du dat

Pleshɔlda kɔntinyu fɔ di skrolspi list-grup ɛgzampul. Dis wan gɛt fɔ du wit aytem 1. Nɔ nid fɔ beg fɔ padi biznɛs. No frayd de naw, let go en jos bi fri, a go laik yu unconditionally. Las Fraide nait. No bi wan shy kinda guy a go bet se i fayn. Sɔm afta ay skul we wi fɔs mit. 'Cause na di muse en di artist.' Wetin? Wet. Tink se na mi na di ɛksɛpshɔn.

Aytem 2 we de sho aw fɔ du dat

Pleshɔlda kɔntinyu fɔ di skrolspi list-grup ɛgzampul. Dis wan de riliet to item 2. Yea, shi de dans to in own bit. Oh, nɔto so. Yu bin fɔ dɔn bi di wan we big pas ɔlman. ‘Koz, bebi, yu na faya wok. Sɔntɛm na rizin we mek dɛn lɔk ɔl di domɔt dɛn. Opin yu at ɛn jɔs mek i bigin. So très chic, yeah, na wan klashik.

Aytem 3 we de sho aw fɔ du dat

Pleshɔlda kɔntinyu fɔ di skrolspi list-grup ɛgzampul. Dis wan gɛt fɔ du wit aytem 3. Wi de go ɔp ɛn ɔp. Nɔ ɛva wan witout di ɔda wan, wi mek wan agrimɛnt. A de waka na di ays. Sɔmbɔdi se dɛn dɔn pul yu tatu. Naw a de flot lɛk bɔtaflay. Tone, tan fit en redi, turn it up cause its gettin' hevi. Cause wans yu ar mine, once yu ar mine. Yu jus gotta ignite de lait en let it shain! So wi hit di boulevard. Yu eva fil, fil so pepa thin. A de si am ɔl, a de si am naw.

Aytem 4 we de sho aw fɔ du dat

Pleshɔlda kɔntinyu fɔ di skrolspi list-grup ɛgzampul. Dis wan gɛt fɔ du wit aytem 4. Sɔm afta ay skul we wi fɔs mit. No frayd de naw, let go en jos bi fri, a go laik yu unconditionally. Sun-kissed skin so hot wi go melt yu popsicle. Dis lɔv go mek yu 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>

Aw fɔ yuz am

Via data atribyut dɛn

Fɔ mek i izi fɔ ad skrolspi bihayvya to yu tɔpba nevigishɔn, ad data-spy="scroll"to di ɛlimɛnt we yu want fɔ spay pan (mɔs tipikli dis go bi di <body>). Dɔn ad di data-targetatribyut wit di ID ɔ klas fɔ di mama ɛn papa ɛlimɛnt fɔ ɛni Bootstrap .navkɔmpɔnɛnt.

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>

Yu kin yuz JavaSkript fɔ yuz am

Afta yu dɔn ad position: relative;yu CSS, kɔl di skrol dɛn bay JavaSkript:

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

Risolvable ID target dɛn nid fɔ de

Navbar link dɛn fɔ gɛt id target dɛn we dɛn kin sɔlv. Fɔ ɛgzampul, a <a href="#home">home</a>fɔ kɔrɛkt to sɔntin we de na di DOM lɛk <div id="home"></div>.

Nɔn- :visibletarget ɛlimɛnt dɛn we dɛn nɔ tek tɛm wit

Target elements we nɔ de :visibleakɔdin to jQuery go ignore ɛn dɛn kɔrɛspɔndɛns nav aytem dɛn nɔ go ɛva aylayt.

Di we aw dɛn de du am

.scrollspy('refresh')

We yu de yuz scrollspy in kɔnjɔkt wit ad ɔ pul ɛlimɛnt dɛn frɔm di DOM, yu go nid fɔ kɔl di rifresh we lɛk so:

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

.scrollspy('dispose')

I de pwɛl wan ɛlimɛnt in skrol.

Di tin dɛn we yu kin pik fɔ du

Yu kin pas opshɔn dɛn bay we yu yuz data atribyut ɔ JavaSkript. Fɔ data atribyut dɛn, ad di opshɔn nem to data-, lɛk insay data-offset="".

Nem Kayn Balans Tɔk bɔt
ɔfset nɔmba 10. Di wan dɛn we de Piksɛl dɛn fɔ ɔfset frɔm ɔp we yu de kɔl di pozishɔn fɔ skrol.
we rop ɔto Fɛn us sɛkshɔn di spay ɛlimɛnt de insay.go autopik di bɛst we fɔ gɛt skrol kɔdinɛt dɛn. offsetgo yuz jQuery ɔfset we fɔ gɛt skrol kɔdinɛt dɛn. positiongo yuz jQuery pozishɔn mɛtɔd fɔ gɛt skrol kɔdinɛt dɛn.
tagɛt string fɔ di wan dɛn we de | jKwɛri ɔbjɛkt | DOM elemɛnt Spɛsifikɛt ɛlimɛnt fɔ aplay Scrollspy plɔgin.

Di tin dɛn we kin apin

Di kayn tin we apin Tɔk bɔt
aktivɛt.bs.skrol dɛn Dis ivent de faya pan di skrol ɛlimɛnt ɛnitɛm we di skrol spy mek nyu tin aktiv. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})