Source

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 element we yu de spay pan, ɔltɛ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.
  • Ankɔ ( <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

Ad leggings keytar, brunch id art pati dolor labore. Pitchfork yr enim lo-fi bifo dem sold out qui. Tumblr fam-to-tebul baysikul rayt ɛnitin. Anim keffiyeh karles kardigan. Velit seitan mcsweeney in foto booth 3 wolf mun irure. Cosby sweta lomo jins shɔt, williamsburg hoodie minim qui yu probabli nɔ yɛri bɔt dɛn et kadigan trɔst fund culpa biodiesel wes anderson aesthetic. Nihil tatu accusamus, cred irony bayodizel keffiyeh artisan ullamco konsekvat.

@mdo na @mdo

Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

one

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.

two

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa mesenja bag marfa wetin delektus fud trak. Sapiente sint id asumenda. Locavore sed helvetica cliche irony, thundercats yu probabli noh yehri boht dem consequat hoodie gluten-fri lo-fi fap aliquip. Labore elit placeat bifo dɛn sɛl aut, terry richardson proident brunch nesciunt quis cosby sweta pariatur keffiyeh ut helvetica artisan. Cardigan kraft bia seitan redimade velit. VHS chambray laboris t ɛ m ɔ r v ɛ n ɛ m. Anim mollit minim komodo ullamco na di tendakat.

<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-haspopup="true" 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

Ex kכnsekvεt kכmכdo adipisisin εksεsεtεshכn aute εkspεptכr כkεkat ullamco duis aliqua id magna ullamco eu. Du aute ipsum ipsum ullamco silum kɔnsɛkt ut ɛn aut kɔnsɛkt labore. Fugiat laborum incididunt tempor eu konsekwat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua ɛn aliqua ɔfisa quis ɛn incididunt voluptate nɔ anim reprehenderit adipisicing dolore ut kɔnsɛkwat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id kupidat nula elit kupidat komodo velit ut eiusmod kupidat elit dolore.

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

Amet tempor mollit aliquip pariatur excepteur komodo do ea cillum komodo Lorem ɛn occaecat elit qui et. Aliquip labore ex ex esse voluptate occaecat Lorem ullamco deserunt. Aliqua cillum ekseptɔ irure kɔnsɛkwɛt id quis ea. Siddon proident ullamco aute magna pariatur nostrud wok. Reprehenderit aliqua komodo eiusmod aliquip est du duis amet proident magna konsektetur konsekvat eu komodo fugiat non quis. Enim aliquip eksasaiz ullamco adipisicing voluptate excepteur minim eksasaiz minim minim komodo adipisisin eksasaiz officia nisi adipisisin. Anim id duis qui consequat laboure adipisisin sint dolor elit cilum anim et fugiat.

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

Cillum nisi deserunt magna eiusmod qui eiusmod velit voluptate pariatur laborum sunt enim. Irure laboris mollit consequat incididunt sint et culpa culpa incididunt adipisicing magna magna occaecat. Nulla ipsum cillum eiusmod sint elit excepteur ea labore enim consectetur in labore anim. Proident ullamco ipsum esse elit ut Lorem eiusmod dolor et eiusmod. Anim occaecat nulla in non consequat eiusmod velit incididunt.

Item 2

Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur ipsum commodo tempor sunt in proident.

Item 3

Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.

Item 3-1

Deserunt quis elit Lorem eiusmod amet enim enim amet minim Lorem proident nostrud. Ea id dolore anim exercitation aute fugiat labore voluptate cillum do laboris labore. Ex velit exercitation nisi enim labore reprehenderit labore nostrud ut ut. Esse officia sunt duis aliquip ullamco tempor eiusmod deserunt irure nostrud irure. Ullamco proident veniam laboris ea consectetur magna sunt ex exercitation aliquip minim enim culpa occaecat exercitation. Est tempor excepteur aliquip laborum consequat do deserunt laborum esse eiusmod irure proident ipsum esse qui.

Item 3-2

Labore sidon kulpa komodo elit adipisisin sidon aliquip elit proident voluptate minim mollit nostrud aute reprehenderit du. Mollit excepteur eu Lorem ipsum anim komodo sint labore Lorem in eksasaiz velit incididunt. Occaecat consectetur nisi in occaecat proident minim enim sunt reprehenderit eksasaiz cupidatat ɛn du ɔfisa. Aliquip consequat ad laboure leba mollit ut amet. Sit pariatur tempor proident in veniam kulpa aliqua excepteur elit magna fugiat eiusmod amet ofisia.

<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">Item2</a>
    <a class="nav-link" href="#item-3">Item3</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 2-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

Ex kכnsekvεt kכmכdo adipisisin εksεsεtεshכn aute εkspεptכr כkεkat ullamco duis aliqua id magna ullamco eu. Du aute ipsum ipsum ullamco silum kɔnsɛkt ut ɛn aut kɔnsɛkt labore. Fugiat laborum incididunt tempor eu konsekwat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua ɛn aliqua ɔfisa quis ɛn incididunt voluptate nɔ anim reprehenderit adipisicing dolore ut kɔnsɛkwat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id kupidat nula elit kupidat komodo velit ut eiusmod kupidat elit dolore.

Aytem 2 we de sho aw fɔ du dat

Quis magna Lorem ani amet ipsum du mollit sidon cilum voluptate ex nulla tempor. Laborum consequat non elit enim eksasaiz cilum aliqua konsekvat id alikwa. Esse ex konsektetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sidɔm ɛn elit aliqua esse irure. Laborum nisi sit est tempor labourum mollit labore officia labourum ekseptɔr kɔmodo nɔ kɔmodo dolor ɛksɛptɔr kɔmodo. Ipsum fugiat ex est konsektetur ipsum komodo tempor sunt in proident.

Aytem 3 we de sho aw fɔ du dat

Quis ani sit do amet fugiat dolor velit sidon ea ea du reprehenderit kulpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat ɛksɛptɔ aliquip kulpa aut tɛmpor rɛprɛhɛndrit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit kulpa irure ullamko est ex ullamco ekseptɔ.

Aytem 4 we de sho

Quis ani sit do amet fugiat dolor velit sidon ea ea du reprehenderit kulpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat ɛksɛptɔ aliquip kulpa aut tɛmpor rɛprɛhɛndrit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit kulpa irure ullamko est ex ullamco ekseptɔ.

<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">Item2</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 dɛn fɔ 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')

Destroy wan element in skrol spy.

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.

Di tin dɛn we kin apin

Di kayn tin we apin Tɔk bɔt
aktivet.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…
})