Source

Scrollspy ya kosala

Mikolo oyo automatiquement navigation ya Bootstrap to ba composants ya groupe ya liste na kotalela position ya défilement mpo na kolakisa lien nini ezali activé actuellement na port de vue.

Ndenge oyo esalaka

Scrollspy ezali na mwa masɛngami mpo na kosala malamu:

  • Soki ozali kotonga JavaScript na biso uta na source, esengiutil.js .
  • Esengeli kosalela yango na composant nav ya Bootstrap to groupe ya liste .
  • Scrollspy esengaka position: relative;na élément oyo ozali espionnage na yango, mingi mingi <body>.
  • Ntango ozali kosala espionnage na ba éléments mosusu oyo ezali te <body>, sala makasi ozala na heightensemble mpe overflow-y: scroll;osaleli yango.
  • Ba ancres ( <a>) esengeli mpe esengeli kolakisa élément moko na oyo id.

Ntango esalemi malamu, nav to groupe ya liste na yo ekosala mise à jour na kolanda yango, ekokende na .activekelasi uta na eloko moko kino na oyo elandi na kotalela ba cibles na bango oyo esangisi yango.

Ndakisa na navbar

Défiler na esika oyo ezali na se ya navbar mpe tala mbongwana ya kelasi oyo ezali kosala. Biloko oyo ezali kokita ekozala mpe na bilembo mingi.

@mafuta

Leggings ya publicité keytar, brunch id art fête dolor labore. Pitchfork yr enim lo-fi avant ba teka qui. Tumblr ferme-à-mesa vélo droits ezala nini. Anim keffiyeh carles cardigan na mokili ya lelo. Velit seitan kiosque ya ba photos ya mcsweeney 3 loup sanza irure. Cosby chandail lomo jean short, williamsburg hoodie minim qui mbala mosusu oyoki bango te et cardigan fonds de fidélité culpa biodiesel wes anderson esthétique. Nihil tatoué accusamus, cred ironie biodiesel keffiyeh artisan ullamco consequat.

@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 sac ya messenger marfa nini delectus camion ya biloko ya kolia. Sapiente synth id oyo ekanisami. Locavore sed helvetica cliche ironie, ba mbwa ya nkake oyo mbala mosusu oyoká bango te consequat hoodie sans gluten lo-fi fap aliquip. Labore elit placeat avant ba teka, terry richardson proident brunch nesciunt quis cosby chandail pariatur keffiyeh ut helvetica artisan. Cardigan bière artisanale seitan velit prêt. VHS chambray laboris ya ntango mokuse. Anim mollit minim commodo ullamco ba mbwa ya nkake.

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

Ndakisa na nav oyo ekangami

Scrollspy esalaka mpe na .navs oyo ekangami. Soki nested .navezali .active, baboti na yango mpe bakozala .active. Défiler na esika oyo ezali pembeni ya navbar mpe tala ndenge classe oyo ezali kosala ebongwana.

Likambo 1

Ex consequat commodo kosala ngalasisi ya mafuta ya nzoto aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Sala aute ipsum ipsum ullamco cillum consectetur ut mpe aute consectetur mosala. Fugiat laborum incididunt tempor eu conséquat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut conséquat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidat elit cupidat commodo velit ut eusmod cupidatat elit dolore.

Likambo 1-1

Amet tempor mollit aliquip pariatur excepteur commodo kosala ea cillum commodo Lorem mpe occaecat elit qui et. Aliquip mosala ex ex esse voluptate occaecat Lorem ullamco epanzani. Aliqua cillum excepteur irure conséquat id oyo ezali na ntina mingi. Fanda proident ullamco aute magna pariatur mosala ya kosala nostrud. Reprehenderit aliqua commodo eusmod aliquip est do duis amet proident magna consectetur consequat eu commodo kokima non quis. Enim aliquip exercice ullamco adipisicing voluptate excepteur minim exercitation minim minim commodo adipisicing exercice officia nisi adipisicing. Anim id duis qui conséquat mosala adipisicing lisumu dolor elit cillum anim et fugiat.

Likambo 2-2

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 kofanda culpa commodo elit adipisicing kofanda aliquip elit proident voluptate minim mollit nostrud aute reprehenderit kosala. Mollit excepteur eu Lorem ipsum anim commodo sint mosala Lorem na kosala ngalasisi velit incididunt. Occaecat consectetur nisi na occaecat proident minim enim sunt reprehenderit kosala ngalasisi cupidatat mpe kosala officia. Aliquip consequat ad mosala mosala mollit ut amet. Fanda pariatur tempor proident na veniam culpa aliqua longola kaka elit magna fugiat eiusmod amet officia.

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

Ndakisa na liste-group

Scrollspy esalaka mpe na .list-groups. Salá défilement na esika oyo ezali pembeni ya etuluku ya liste mpe talá mbongwana ya kelasi oyo ezali kosala.

Likambo 1

Ex consequat commodo kosala ngalasisi ya mafuta ya nzoto aute excepteur occaecat ullamco duis aliqua id magna ullamco eu. Sala aute ipsum ipsum ullamco cillum consectetur ut mpe aute consectetur mosala. Fugiat laborum incididunt tempor eu conséquat enim dolore proident. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua et aliqua officia quis et incididunt voluptate non anim reprehenderit adipisicing dolore ut conséquat deserunt mollit dolore. Aliquip nulla enim veniam non fugiat id cupidat elit cupidat commodo velit ut eusmod cupidatat elit dolore.

Likambo ya 2

Quis magna Lorem ani amet ipsum kosala mollit vanda cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercice cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est na mokolo ya mosala ad sit ipsum anim Lorem. Incididunt veniam velit elit elit véniam Lorem aliqua quis ullamco deserunt vanda enim elit aliqua esse irure. Laborum nisi sit est tempor mosala mollit mosala officia mosala longola kaka commodo non commodo dolor longola kaka commodo. Ipsum fugiat ex est consectetur ipsum commodo moi ya ntango moke na proident.

Likambo ya 3

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

Likambo ya 4

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

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

Kosalela yango

Na nzela ya ba attributs ya ba données

Mpo na kobakisa na pete bizaleli ya scrollspy na navigation na yo ya topbar, bakisa data-spy="scroll"na élément oyo olingi kosala espionnage (mingi mingi oyo ekozala na <body>). Na sima bakisa data-targetattribut na ID to classe ya élément parent ya .navcomposant nionso ya 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>

Na nzela ya JavaScript

Nsima ya kobakisa position: relative;na CSS na yo, benga scrollspy na nzela ya JavaScript:

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

Ba cibles ya ID oyo ekoki ko résoudre esengeli

Ba liens ya Navbar esengeli kozala na ba cibles id oyo ekoki ko résoudre. Ndakisa, a <a href="#home">home</a>esengeli ko correspondre na eloko moko na DOM lokola <div id="home"></div>.

Ba éléments :visibleoyo ezali cible te ba ignorer

Ba éléments cibles oyo ezali :visibleselon jQuery te ekozala ignorés mpe ba éléments nav correspondants na bango ekozala jamais souligné.

Ba méthodes ya kosala

.scrollspy('refresh')

Ntango ozali kosalela scrollspy elongo na kobakisa to kolongola biloko na DOM, ekosɛnga obenga lolenge ya kozongisa sika lokola boye:

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

.scrollspy('dispose')

Ebebisaka scrollspy ya élément moko.

Makambo oyo okoki kopona

Ba options ekoki koleka na nzela ya ba attributs ya ba données to JavaScript. Mpo na ba attributs ya ba données, bakisa kombo ya option na data-, lokola na data-offset="".

Nkombo Lolenge Mbeba Ndimbola
offset ya kosala nimero 10 Ba pixels ya ko offset depuis likolo tango ya ko calculer position ya défilement.

Makambo oyo esalemaki

Lolenge ya likambo Ndimbola
kosala.bs.srollspy na mosala Evenement oyo ezo beta na élément ya défilement chaque fois que eloko ya sika ekomi activé na scrollspy. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something…
})