in English

Scrollspy

Actualizați automat navigarea Bootstrap sau listați componentele grupului pe baza poziției de defilare pentru a indica ce link este activ în prezent în fereastra de vizualizare.

Cum functioneaza

Scrollspy are câteva cerințe pentru a funcționa corect:

  • Dacă construiți JavaScript din sursă, este nevoieutil.js de .
  • Trebuie utilizat pe o componentă de navigare Bootstrap sau pe un grup de liste .
  • Scrollspy necesită position: relative;elementul pe care îl spionați, de obicei <body>.
  • Când spionați alte elemente decât <body>, asigurați-vă că aveți un heightset și overflow-y: scroll;aplicat.
  • Ancorele ( <a>) sunt necesare și trebuie să indice un element cu acesta id.

Când este implementat cu succes, navigarea sau grupul de listă se va actualiza în consecință, mutând .activeclasa de la un articol la altul în funcție de obiectivele asociate.

Exemplu în bara de navigare

Derulați zona de sub bara de navigare și urmăriți schimbarea clasei active. Elementele derulante vor fi, de asemenea, evidențiate.

@gras

Conținut substituent pentru exemplul scrollspy. Ai cea mai bună arhitectură. Ştampile de paşapoarte, e cosmopolită. Bine, proaspăt, înverșunat, l-am blocat. N-am plănuit niciodată că într-o zi te voi pierde. Ea îți mănâncă inima. Sărutul tău este cosmic, fiecare mișcare este magică. Mă refer la cei, adică ca și cum ea ar fi aceea. Salutări, dragi, haideți să facem o călătorie. Doar dețineți noaptea ca cea de 4 iulie! Dar ai prefera să fii irosit.

@mdo

Conținut substituent pentru exemplul scrollspy. Pentru că ea este muza și artistul. (Așa facem noi) Deci vrei să te joci cu magia. Așa că fii sigur înainte de a-mi da totul mie. Mă plimb, merg pe aer (în seara asta). Sari peste vorbă, am auzit totul, e timpul să mergi pe jos.

unu

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

Conținut substituent pentru exemplul scrollspy. Dacă vrei să dansezi, dacă vrei totul, știi că eu sunt fata pe care ar trebui să o suni. Merge prin furtună aș vrea. Așa că lasă-mă să te iau în costumul tău de ziua de naștere. Cel care a scăpat. Vineri seara trecută, da, cred că am încălcat legea, spun mereu că ne vom opri. Pentru că ea este puțin din Yoko și e puțin din „Oh, nu”. Vreau să cadă maxilarul, să izbucnească ochii, să se întoarcă capul, să șocheze corpul. Da, ne-am maxim cardurile de credit și am fost dat afară din bar.

Și mai mult conținut de substituent, pentru o măsură bună.

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

Exemplu cu navigare imbricată

Scrollspy funcționează și cu .navs imbricate. Dacă un imbricat .naveste .active, părinții lui vor fi și .active. Derulați zona de lângă bara de navigare și urmăriți schimbarea clasei active.

Punctul 1

Conținut substituent pentru exemplul scrollspy. Acesta se referă la articolul 1. Te duce la kilometri sus, atât de sus, pentru că are acel zâmbet internațional. E un străin în patul meu, se bate în capul meu. Oh nu. Într-o altă viață te-aș face să rămâi. Pentru că eu, sunt capabil de orice. Pregătindu-mă pentru bătălia mea de încoronare. Obișnuiai să furi băutura alcoolică a părinților tăi și să te urci pe acoperiș. Ton, bronzat și gata, ridică-l pentru că devine greu. Dragostea ei este ca un drog. Presupun că am uitat că am de ales.

Punctul 1-1

Conținut substituent pentru exemplul scrollspy. Acesta se referă la punctul 1-1. Ai cea mai bună arhitectură. Ştampile de paşapoarte, e cosmopolită. Bine, proaspăt, înverșunat, l-am blocat. N-am plănuit niciodată că într-o zi te voi pierde. Ea îți mănâncă inima. Sărutul tău este cosmic, fiecare mișcare este magică. Mă refer la cei, adică ca și cum ea ar fi aceea. Salutări, dragi, haideți să facem o călătorie. Doar dețineți noaptea ca cea de 4 iulie! Dar ai prefera să fii irosit.

Punctul 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

Conținut substituent pentru exemplul scrollspy. Acesta se referă la punctul 3-2. Esti original, nu poate fi inlocuit. Toată noaptea cântă, cântecul tău. Fete din California, suntem de netăgăduit. Ca o pasăre fără cușcă. Nu mai este frică acum, lasă-te și fii liber, te voi iubi necondiționat. Văd scrisul de pe perete. Ai putea călători prin lume, dar nimic nu se apropie de coasta de aur.

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

Exemplu cu list-group

Scrollspy funcționează și cu .list-groups. Derulați zona de lângă grupul de listă și urmăriți schimbarea clasei active.

Punctul 1

Conținutul substituent pentru exemplul de grup de listă scrollspy. Acesta se referă la punctul 1. Nu aveți nevoie de scuze. Nu mai este frică acum, lasă-te și fii liber, te voi iubi necondiționat. Ultima noapte de vineri. Nu fi un tip timid, pun pariu că e frumos. Vara după liceu când ne-am cunoscut prima dată. Pentru că ea este muza și artistul. Ce? Aștepta. Am crezut că eu sunt excepția.

Punctul 2

Conținutul substituent pentru exemplul de grup de listă scrollspy. Acesta se referă la punctul 2. Da, ea dansează pe ritmul ei. Oh nu. Ai fi putut fi cel mai mare. 'Pentru ca Dragă, ești un foc de artificii. Poate un motiv pentru care toate ușile sunt închise. Deschide-ți inima și lasă-o să înceapă. Așa foarte șic, da, este o clasică.

Punctul 3

Conținutul substituent pentru exemplul de grup de listă scrollspy. Acesta se referă la punctul 3. Mergem din ce în ce mai sus. Niciodată unul fără celălalt, am făcut un pact. Merg in aer. Cineva a spus că ți-ai îndepărtat tatuajul. Acum plutesc ca un fluture. Ton, bronzat și gata, ridică-l pentru că devine greu. Pentru că odată ce ești al meu, odată ce ești al meu. Trebuie doar să aprinzi lumina și să o lași să strălucească! Așa că am ajuns pe bulevard. Te-ai simțit vreodată atât de subțire de hârtie. Văd totul, văd acum.

Punctul 4

Conținutul substituent pentru exemplul de grup de listă scrollspy. Acesta se referă la punctul 4. Vara după liceu când ne-am întâlnit prima dată. Nu mai este frică acum, lasă-te și fii liber, te voi iubi necondiționat. Piele sărutată de soare atât de fierbinte încât îți vom topi popsicleul. Această iubire te va face să levitezi.

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

Utilizare

Prin atribute de date

Pentru a adăuga cu ușurință comportamentul scrollspy la navigarea din bara de sus, adăugați data-spy="scroll"la elementul pe care doriți să îl spionați (de obicei, acesta ar fi <body>). Apoi adăugați data-targetatributul cu ID-ul sau clasa elementului părinte al oricărei .navcomponente 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>

Prin JavaScript

După ce ați adăugat position: relative;CSS, apelați scrollspy prin JavaScript:

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

Sunt necesare ținte ID rezolvabile

Legăturile din bara de navigare trebuie să aibă ținte de ID rezolvabile. De exemplu, un <a href="#home">home</a>must corespunde cu ceva din DOM precum <div id="home"></div>.

Elemente non :visible-țintă ignorate

Elementele țintă care nu sunt :visibleconform jQuery vor fi ignorate și elementele lor de navigare corespunzătoare nu vor fi niciodată evidențiate.

Metode

.scrollspy('refresh')

Când utilizați scrollspy împreună cu adăugarea sau eliminarea elementelor din DOM, va trebui să apelați metoda de reîmprospătare astfel:

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

.scrollspy('dispose')

Distruge scrollspy-ul unui element.

Opțiuni

Opțiunile pot fi transmise prin atribute de date sau JavaScript. Pentru atributele datelor, adăugați numele opțiunii la data-, ca în data-offset="".

Nume Tip Mod implicit Descriere
decalaj număr 10 Pixeli de decalat de sus atunci când se calculează poziția derulării.
metodă şir auto Găsește în ce secțiune se află elementul spionat. autova alege cea mai bună metodă pentru a obține coordonatele de defilare. offsetva folosi metoda jQuery offset pentru a obține coordonatele de defilare. positionva folosi metoda de poziție jQuery pentru a obține coordonatele de defilare.
ţintă șir | obiect jQuery | element DOM Specifică elementul pentru a aplica pluginul Scrollspy.

Evenimente

Tip de eveniment Descriere
activare.bs.scrollspy Acest eveniment se declanșează asupra elementului de scroll ori de câte ori un element nou este activat de scrollspy. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})