in English

Scrollspy

Aghjurnate automaticamente a navigazione Bootstrap o i cumpunenti di u gruppu di lista basatu nantu à a pusizione di scorrimentu per indicà quale ligame hè attualmente attivu in a vista.

Cumu funziona

Scrollspy hà uni pochi di esigenze per funziunà bè:

  • Se custruite u nostru JavaScript da a fonte, hè necessariuutil.js .
  • Deve esse usatu in un cumpunente di navigazione Bootstrap o un gruppu di lista .
  • Scrollspy richiede position: relative;l'elementu chì spia, di solitu u <body>.
  • Quandu spiegà elementi altru ch'è u <body>, assicuratevi di avè un heightset è overflow-y: scroll;applicatu.
  • L'ancore ( <a>) sò necessarii è deve indicà un elementu cun quellu id.

Quandu hè implementatu cù successu, u vostru gruppu di navigazione o lista hà da aghjurnà in cunseguenza, movendu a .activeclasse da un articulu à l'altru basatu nantu à i so miri assuciati.

Esempiu in a barra di navigazione

Scroll the area below the navbar and watch the active class change. L'articuli dropdown seranu ancu evidenziati.

@grassu

Cuntenutu di piazzamentu per l'esempiu scrollspy. Avete a più bella architettura. I timbri di passaportu, hè cosmopolita. Finu, frescu, feroce, l'avemu in serratura. Ùn aghju mai pensatu chì un ghjornu ti perdessi. Ella manghja u vostru core. U vostru baciu hè cosmicu, ogni muvimentu hè magicu. Vogliu dì quelli, vogliu dì cum'è ella hè quella. Saluti cari, facemu un viaghju. Basta pussede a notte cum'è u 4 di lugliu! Ma preferite persu.

@mdo

Cuntenutu di piazzamentu per l'esempiu scrollspy. Perchè ella hè a musa è l'artista. (Hè cumu facemu) Allora vulete ghjucà cù a magia. Allora assicuratevi prima di dà tuttu à mè. marchjò, marchjò in aria (sta sera). Saltate a conversazione, intesu tuttu, u tempu di marchjà a caminata.

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

Cuntenutu di piazzamentu per l'esempiu scrollspy. Sè vo vulete ballà, se vulete tuttu, sapete chì sò a zitella chì duvete chjamà. Camminate à traversu a tempesta I avissi. Allora lasciami mette in u vostru vestitu di anniversariu. Quellu chì hè scappatu. Venneri scorsu sera, iè, pensu chì avemu violatu a lege, dicemu sempre chì ci fermemu. Perchè ella hè un pocu di Yoko, È hè un pocu di "Oh no". Vogliu chì a mandibula caduta, l'ochju poppin', a testa turnin', u corpu shockin'. Iè, avemu maxisatu e nostre carte di creditu è ​​sò stati cacciati da u bar.

È un pocu più cuntenutu di placeholder, per una bona misura.

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

Esempiu cù nav nidificatu

Scrollspy travaglia ancu cù .navs nidificati. Se un nidificatu .navhè .active, i so genitori seranu ancu .active. Scorri l'area accantu à a barra di navigazione è fighjate u cambiamentu di classa attiva.

Articulu 1

Cuntenutu di piazzamentu per l'esempiu scrollspy. Questu hè in relazione cù l'articulu 1. Ti porta miles high, so high, perchè ella hà quellu surrisu internaziunale. Ci hè un stranieru in u mo lettu, ci hè un battitu in u mo capu. Oh, nò. In un'altra vita ti farebbe stà. Perchè eiu, sò capace di tuttu. Adupratu per a mo battaglia di corona. Adupratu per arrubà u licore di i vostri genitori è cullà à u tettu. Tone, abbronzatu in forma è pronta, alzallu perchè diventa pesante. U so amore hè cum'è una droga. Pensu chì aghju scurdatu chì aghju avutu una scelta.

Elementu 1-1

Cuntenutu di piazzamentu per l'esempiu scrollspy. Questu hè in relazione cù l'articulu 1-1. Avete a più bella architettura. I timbri di passaportu, hè cosmopolita. Finu, frescu, feroce, l'avemu in serratura. Ùn aghju mai pensatu chì un ghjornu ti perdessi. Ella manghja u vostru core. U vostru baciu hè cosmicu, ogni muvimentu hè magicu. Vogliu dì quelli, vogliu dì cum'è ella hè quella. Saluti cari, facemu un viaghju. Basta pussede a notte cum'è u 4 di lugliu! Ma preferite persu.

Elementu 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

Cuntenutu di piazzamentu per l'esempiu scrollspy. Questu hè in relazione cù l'articulu 3-2. Sì uriginale, ùn pò micca esse rimpiazzatu. Tutta a notte sunanu, a to canzone. E ragazze di California simu innegabili. Cum'è un acellu senza gabbia. Ùn ci hè micca paura avà, lasciate andà è solu esse liberu, ti amu incondizionatamente. Possu vede a scrittura nantu à u muru. Pudete viaghjà in u mondu ma nunda ùn si avvicina à a costa d'oru.

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

Esempiu cù list-group

Scrollspy travaglia dinù cù .list-groups. Scorri l'area accantu à u gruppu di lista è fighjate u cambiamentu di classa attiva.

Articulu 1

Cuntenutu di piazzamentu per l'esempiu di u gruppu di lista scrollspy. Questu hè in relazione cù l'articulu 1. Ùn avete bisognu di scuse. Ùn ci hè micca paura avà, lasciate andà è solu esse liberu, ti amu incondizionatamente. L'ultimu venneri sera. Ùn siate micca un timida timida, scumeraghju chì hè bella. L'estiu dopu à u liceu quandu avemu scontru prima. Perchè ella hè a musa è l'artista. Chì ? Aspetta. Pensu chì eru l'eccezzioni.

Articulu 2

Cuntenutu di piazzamentu per l'esempiu di u gruppu di lista scrollspy. Questu hè in relazione cù l'articulu 2. Iè, balla à u so propiu ritmu. Oh, nò. Puderia esse u più grande. Perchè, criatura, sì un focu d'artificiu. Forse un mutivu perchè tutte e porte sò chjuse. Aprite u vostru core è appena lasciate principià. So très chic, sì, hè un classicu.

Articulu 3

Cuntenutu di piazzamentu per l'esempiu di u gruppu di lista scrollspy. Questu hè in relazione cù l'articulu 3. Andemu più altu è più altu. Mai unu senza l'altru, avemu fattu un pattu. camminu in aria. Qualchissia hà dettu chì avete u vostru tatuatu eliminatu. Avà sò fluttu cum'è una farfalla. Tone, abbronzatu in forma è pronta, alzallu perchè diventa pesante. Perchè una volta chì site mio, quandu site mio. Basta à accende a luce è lasciala brilla! Allora andemu in u boulevard. Avete mai sentitu, sentite cusì carta fina. Vecu tuttu, vecu avà.

Articulu 4

Cuntenutu di piazzamentu per l'esempiu di u gruppu di lista scrollspy. Questu hè in relazione cù l'articulu 4. L'estiu dopu u liceu quandu avemu scontru prima. Ùn ci hè micca paura avà, lasciate andà è solu esse liberu, ti amu incondizionatamente. A pelle baciata da u sole hè cusì calda chì sciogliemu u vostru popsicle. Stu amore vi farà levità.

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

Usu

Via attributi di dati

Per aghjunghje facilmente u cumpurtamentu scrollspy à a vostra navigazione in cima, aghjunghje data-spy="scroll"à l'elementu chì vulete spià (a più tipica questu seria u <body>). Allora aghjunghje l' data-targetattributu cù l'ID o a classa di l'elementu parent di qualsiasi .navcumpunente 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>

Via JavaScript

Dopu avè aghjustatu position: relative;in u vostru CSS, chjamate scrollspy via JavaScript:

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

Obiettivi di ID risolvibili necessarii

I ligami di Navbar anu da avè target id risolvibili. Per esempiu, un <a href="#home">home</a>deve currisponde à qualcosa in u DOM cum'è <div id="home"></div>.

Elementi non :visibletarget ignorati

L'elementi di destinazione chì ùn sò micca :visiblesecondu jQuery seranu ignorati è i so elementi di navigazione currispondenti ùn saranu mai evidenziati.

I metudi

.scrollspy('refresh')

Quandu si usa scrollspy in cunghjunzione cù l'aghjunzione o l'eliminazione di elementi da u DOM, avete bisognu di chjamà u metudu di rinfrescante cusì:

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

.scrollspy('dispose')

Distrughje u scrollspy di un elementu.

Opzioni

L'opzioni ponu esse passate per attributi di dati o JavaScript. Per l'attributi di dati, aghjunghje u nome di l'opzione à data-, cum'è in data-offset="".

Nome Tipu Default Descrizzione
offset numeru 10 Pixel per compensà da a cima quandu calcula a pusizione di scroll.
metudu stringa autumàticu Trova in quale sezione si trova l'elementu spiatu auto, sceglie u megliu metudu per uttene coordenate di scroll. offsetaduprà u metudu di offset jQuery per uttene coordenate di scroll. positionaduprà u metudu di posizione jQuery per uttene coordenate di scroll.
mira stringa | oggettu jQuery | Elementu DOM Specifica l'elementu per applicà u plugin Scrollspy.

Avvenimenti

Tipu d'avvenimentu Descrizzione
attivate.bs.scrollspy Questu avvenimentu spara nantu à l'elementu di scroll ogni volta chì un novu articulu hè attivatu da u scrollspy. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})