in English

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 ko espionner, mingi mingi ba <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

Contenu ya placeholder pona ndakisa ya scrollspy. Ozwi architecture ya malamu koleka. Ba timbres ya passeport, azali cosmopolite. Fine, fresh, fierce, tozwaki yango na serrure. Jamais planifié que un jour nakozala ko perdre yo. Aliaka motema na yo libanda. Ba bisous na yo eza cosmique, mouvement nionso eza magie. Nalingi koloba ba oyo, nalingi koloba lokola ye nde mutu. Mbote balingami tosala mobembo. Kaka propriétaire ya butu lokola le 4 juillet! Kasi okolinga kobeba mpamba.

@mdo

Contenu ya placeholder pona ndakisa ya scrollspy. 'Po ye nde muse na artiste. (Oyo ndenge tosalaka) Donc olingi kosakana na magie. Donc zala kaka sûr avant opesa ngai nionso. Nazo tambola, nazo tambola na mopepe (na butu ya lelo). Skip the discours, oyoki yango nionso, tango ya kotambola na marche.

moko

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

Contenu ya placeholder pona ndakisa ya scrollspy. Soki olingi kobina, soki olingi yango nionso, oyebi que nazali fille oyo esengeli obenga. Tambola na kati ya mopepe makasi oyo nalingaki. Yango wana, tiká nakɔtisa yo na kostume na yo ya mokolo ya mbotama. Oyo akimaki mosika. Vendredi eleki na butu, yeah nakanisi tobukaki mobeko, toloba toujours tokotika. 'Po aza mua Yoko, Pe aza mua 'Oh non'. Nalingi mbanga droppin ', miso poppin ', mutu turnin ', nzoto shockin '. Yeah, to maxed ba cartes de crédit na biso pe ba benganaki biso na bar.

Mpe mwa makambo mosusu ya placeholder, mpo na mesure ya malamu.

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

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

Contenu ya placeholder pona ndakisa ya scrollspy. Oyo etali eloko 1. Ememaka yo bakilometele likolo, likolo mingi, 'mpo azali na mwa koseka wana moko ya mokili mobimba. Mopaya moko azali na mbeto na ngai, ezali na kobɛtabɛta na motó na ngai. Oh, te. Na vie mosusu nalingaki nasala que otikala. 'Po ngai, nazali capable ya eloko nionso. Kobongisa mpo na etumba na ngai ya kozwa motole. Ozalaki koyiba masanga ya baboti na yo mpe komata na toit. Tone, tan fit mpe prêt, kobalusa yango likolo cause ya gettin' kilo. Bolingo na ye ezali lokola nkisi. Nakanisi ete nabosanaki ete nazalaki na likambo ya kopona.

Likambo 1-1

Contenu ya placeholder pona ndakisa ya scrollspy. Oyo etali likambo 1-1. Ozwi architecture ya malamu koleka. Ba timbres ya passeport, azali cosmopolite. Fine, fresh, fierce, tozwaki yango na serrure. Jamais planifié que un jour nakozala ko perdre yo. Aliaka motema na yo libanda. Ba bisous na yo eza cosmique, mouvement nionso eza magie. Nalingi koloba ba oyo, nalingi koloba lokola ye nde mutu. Mbote balingami tosala mobembo. Kaka propriétaire ya butu lokola le 4 juillet! Kasi okolinga kobeba mpamba.

Likambo 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

Contenu ya placeholder pona ndakisa ya scrollspy. Oyo etali likambo 3-2. Ozali original, okoki ko remplacer te. Butu mobimba bazo beta, nzembo na yo. Ba filles ya Californie toza incontestable. Lokola ndeke oyo ezangi cage. Kobanga ezali te sikoyo, tika zala kaka libre, nakolinga yo sans condition. Nazali komona makomi oyo ezali na efelo. Okokaki kosala mobembo na mokili mobimba kasi eloko moko te eyaka penepene na libongo ya wolo.

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

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

Contenu ya placeholder pona ndakisa ya liste-group ya scrollspy. Oyo etali likambo 1. Kozala na mposa ya bolimbisi te. Kobanga ezali te sikoyo, tika zala kaka libre, nakolinga yo sans condition. Vendredi eleki na butu. Kozala kinda mobali ya soni te nako parier eza kitoko. Eleko ya molunge nsima ya eteyelo ya ntei ntango tokutanaki mpo na mbala ya liboso. 'Po ye nde muse na artiste. Nini? Zela. Akanisaki ete ngai nde nazalaki exception.

Likambo ya 2

Contenu ya placeholder pona ndakisa ya liste-group ya scrollspy. Oyo etali eloko 2. Yeah, abinaka na beat na ye moko. Oh, te. Okokaki kozala moto oyo aleki monene. 'Po, bébé, ozali feu d'artifice. Peut-être raison oyo ba portes nionso ekangami. Fungola motema na yo mpe tika kaka ebanda. Donc très chic, yeah, azali classique.

Likambo ya 3

Contenu ya placeholder pona ndakisa ya liste-group ya scrollspy. Oyo etali eloko 3. Tozali kokende likolo mpe likolo. Jamais moko sans mosusu, tosalaki pacte. Nazali kotambola na mopepe. Moto moko alobaki ete balongoli yo tatouage. Sikoyo nazali kopumbwapumbwa lokola papillon. Tone, tan fit mpe prêt, kobalusa yango likolo cause ya gettin' kilo. Cause une fois oza ya ngai, une fois oza ya ngai. Osengeli kaka kopelisa mwinda mpe kotika yango engɛnga! Yango wana tobɛtaki na boulevard. Est-ce que oyokaka jamais, oyokaka tellement papier mince. Namoni yango nyonso, namoni yango sikoyo.

Likambo ya 4

Contenu ya placeholder pona ndakisa ya liste-group ya scrollspy. Oyo etali likambo 4. Eleko ya molunge nsima ya eteyelo ya ntei ntango tokutanaki mpo na mbala ya liboso. Kobanga ezali te sikoyo, tika zala kaka libre, nakolinga yo sans condition. Loposo oyo moyi epesaki bisous moto makasi toko fondu popsicle na yo. Bolingo oyo ekosala que o leviter.

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

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.
metode shene auto Amoni eteni nini élément espionnage ezali na kati autoekopona méthode ya malamu koleka mpo na kozwa ba coordonnées ya défilement. offsetekosalela méthode ya offset ya jQuery mpo na kozwa ba coordonnées ya défilement. positionekosalela méthode ya position jQuery pona kozua ba coordonnées ya défilement.
eloko bazokana molongo ya molongo | jEloko ya motuna | Elemento DOM Ezali kolakisa eleman mpo na kosalela plugin ya Scrollspy.

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...
})