in English

Spia pergamena

Aggiorna automaticamente la navigazione Bootstrap o elenca i componenti del gruppo in base alla posizione di scorrimento per indicare quale collegamento è attualmente attivo nella finestra.

Come funziona

Scrollspy ha alcuni requisiti per funzionare correttamente:

  • Se stai creando il nostro JavaScript dal sorgente, richiedeutil.js .
  • Deve essere utilizzato su un componente di navigazione Bootstrap o su un gruppo di elenchi .
  • Scrollspy richiede position: relative;l'elemento che stai spiando, di solito il <body>.
  • Quando spii elementi diversi da <body>, assicurati di avere un heightset e overflow-y: scroll;applicato.
  • Gli ancoraggi( <a>) sono obbligatori e devono puntare a un elemento con quello id.

Se implementato correttamente, il tuo gruppo di navigazione o elenco si aggiornerà di conseguenza, spostando la .activeclasse da un elemento all'altro in base ai target associati.

Esempio nella barra di navigazione

Scorri l'area sotto la barra di navigazione e osserva il cambio di classe attivo. Anche gli elementi a discesa verranno evidenziati.

@Grasso

Contenuto segnaposto per l'esempio di scrollspy. Hai la migliore architettura. Timbri sui passaporti, è cosmopolita. Bene, fresco, feroce, ce l'abbiamo fatta. Non avevo mai pianificato che un giorno ti avrei perso. Ti mangia il cuore. Il tuo bacio è cosmico, ogni mossa è magica. Intendo quelli, voglio dire come se fosse lei. Saluti cari facciamo un viaggio. Basta possedere la notte come il 4 luglio! Ma preferiresti perderti.

@mdo

Contenuto segnaposto per l'esempio di scrollspy. Perché lei è la musa e l'artista. (Questo è il modo in cui lo facciamo) Quindi vuoi giocare con la magia. Quindi assicurati solo prima di darmi tutto. Sto camminando, sto camminando nell'aria (stasera). Salta il discorso, sentito tutto, è ora di camminare.

uno

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

Contenuto segnaposto per l'esempio di scrollspy. Se vuoi ballare, se vuoi tutto, sai che sono la ragazza che dovresti chiamare. Camminerei attraverso la tempesta lo farei. Quindi lascia che ti porti il ​​tuo vestito di compleanno. Quello che è scappato. Lo scorso venerdì sera, sì, penso che abbiamo infranto la legge, diciamo sempre che ci fermeremo. Perché lei è un po' Yoko, ed è un po' 'Oh no'. Voglio che la mascella cada, gli occhi che si spalancano, la testa che giri, il corpo scioccante. Sì, abbiamo esaurito le nostre carte di credito e siamo stati cacciati dal bar.

E qualche altro contenuto segnaposto, per buona 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>

Esempio con nav nidificato

Scrollspy funziona anche con nidificati .navs. Se un nidificato .navlo è .active, lo saranno anche i suoi genitori .active. Scorri l'area accanto alla barra di navigazione e osserva il cambio di classe attivo.

Articolo 1

Contenuto segnaposto per l'esempio di scrollspy. Questo si riferisce all'elemento 1. Ti porta miglia in alto, così in alto, perché ha quel sorriso internazionale. C'è un estraneo nel mio letto, c'è un martellante nella mia testa. Oh no. In un'altra vita ti farei restare. Perché io, io sono capace di tutto. Preparandomi per la mia battaglia finale. Usato per rubare il liquore dei tuoi genitori e salire sul tetto. Tonifica, abbronzati e pronti, alzalo perché sta diventando pesante. Il suo amore è come una droga. Immagino di aver dimenticato di avere una scelta.

Voce 1-1

Contenuto segnaposto per l'esempio di scrollspy. Questo si riferisce all'articolo 1-1. Hai la migliore architettura. Timbri sui passaporti, è cosmopolita. Bene, fresco, feroce, ce l'abbiamo fatta. Non avevo mai pianificato che un giorno ti avrei perso. Ti mangia il cuore. Il tuo bacio è cosmico, ogni mossa è magica. Intendo quelli, voglio dire come se fosse lei. Saluti cari facciamo un viaggio. Basta possedere la notte come il 4 luglio! Ma preferiresti perderti.

Voce 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

Contenuto segnaposto per l'esempio di scrollspy. Questo si riferisce al punto 3-2. Sei originale, non può essere sostituito. Per tutta la notte stanno suonando, la tua canzone. Ragazze californiane siamo innegabili. Come un uccello senza gabbia. Non c'è paura ora, lasciati andare e sii libero, ti amerò incondizionatamente. Vedo la scritta sul muro. Potresti viaggiare per il mondo ma niente si avvicina alla costa dorata.

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

Esempio con list-group

Scrollspy funziona anche con .list-groups. Scorri l'area accanto al gruppo dell'elenco e osserva il cambio di classe attiva.

Articolo 1

Contenuto segnaposto per l'esempio del gruppo elenco scrollspy. Questo si riferisce al punto 1. Non ho bisogno di scuse. Non c'è paura ora, lasciati andare e sii libero, ti amerò incondizionatamente. Lo scorso venerdì sera. Non essere un tipo timido, scommetto che è bellissimo. L'estate dopo il liceo quando ci siamo incontrati per la prima volta. Perché lei è la musa e l'artista. Che cosa? Attesa. Pensavo di essere l'eccezione.

Articolo 2

Contenuto segnaposto per l'esempio del gruppo elenco scrollspy. Questo si riferisce all'elemento 2. Sì, balla al suo ritmo. Oh no. Saresti potuto essere il migliore. Perché, piccola, sei un fuoco d'artificio. Forse un motivo per cui tutte le porte sono chiuse. Apri il tuo cuore e lascia che inizi. Così très chic, sì, è un classico.

Voce 3

Contenuto segnaposto per l'esempio del gruppo elenco scrollspy. Questo si riferisce al punto 3. Andiamo sempre più in alto. Mai uno senza l'altro, abbiamo fatto un patto. Sto camminando nell'aria. Qualcuno ha detto che ti sei fatto rimuovere il tatuaggio. Ora sto fluttuando come una farfalla. Tonifica, abbronzati e pronti, alzalo perché sta diventando pesante. Perché una volta che sei mio, una volta che sei mio Devi solo accendere la luce e lasciarla brillare! Quindi abbiamo raggiunto il viale. Ti senti mai, ti senti così sottile come la carta. Vedo tutto, lo vedo ora.

Articolo 4

Contenuto segnaposto per l'esempio del gruppo elenco scrollspy. Questo si riferisce al punto 4. Estate dopo il liceo, quando ci siamo incontrati per la prima volta. Non c'è paura ora, lasciati andare e sii libero, ti amerò incondizionatamente. Pelle baciata dal sole così calda che ti scioglieremo il ghiacciolo. Questo amore ti farà levitare.

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

Utilizzo

Tramite attributi di dati

Per aggiungere facilmente il comportamento scrollspy alla tua navigazione nella barra in alto, aggiungi data-spy="scroll"l'elemento che vuoi spiare (di solito questo sarebbe il <body>). Quindi aggiungi l' data-targetattributo con l'ID o la classe dell'elemento padre di qualsiasi .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>

Tramite JavaScript

Dopo aver aggiunto position: relative;il tuo CSS, chiama scrollspy tramite JavaScript:

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

Target ID risolvibili obbligatori

I collegamenti Navbar devono avere destinazioni ID risolvibili. Ad esempio, un <a href="#home">home</a>must corrisponde a qualcosa nel DOM come <div id="home"></div>.

Elementi non :visibletarget ignorati

Gli elementi di destinazione che non sono :visibleconformi a jQuery verranno ignorati e i relativi elementi di navigazione non verranno mai evidenziati.

Metodi

.scrollspy('refresh')

Quando usi scrollspy insieme all'aggiunta o alla rimozione di elementi dal DOM, dovrai chiamare il metodo di aggiornamento in questo modo:

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

.scrollspy('dispose')

Distrugge lo scrollspy di un elemento.

Opzioni

Le opzioni possono essere passate tramite attributi di dati o JavaScript. Per gli attributi dei dati, aggiungere il nome dell'opzione a data-, come in data-offset="".

Nome Tipo Predefinito Descrizione
compensare numero 10 Pixel da compensare dall'alto durante il calcolo della posizione di scorrimento.
metodo corda auto Trova in quale sezione si trova l'elemento spiato. autosceglierà il metodo migliore per ottenere le coordinate di scorrimento. offsetutilizzerà il metodo offset jQuery per ottenere le coordinate di scorrimento. positionutilizzerà il metodo di posizione jQuery per ottenere le coordinate di scorrimento.
obbiettivo stringa | oggetto jQuery | elemento DOM Specifica l'elemento per applicare il plug-in Scrollspy.

Eventi

Tipo di evento Descrizione
attivare.bs.scrollspy Questo evento si attiva sull'elemento scroll ogni volta che un nuovo elemento viene attivato da scrollspy. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})