in English

Scrollspy

Actualitzeu automàticament la navegació Bootstrap o els components del grup de llista en funció de la posició de desplaçament per indicar quin enllaç està actiu actualment a la finestra gràfica.

Com funciona

Scrollspy té uns quants requisits per funcionar correctament:

  • Si esteu creant el nostre JavaScript des de la font, requereixutil.js .
  • S'ha d'utilitzar en un component de navegació Bootstrap o en un grup de llista .
  • Scrollspy requereix position: relative;l'element que estàs espiant, normalment el fitxer <body>.
  • Quan espieu elements que no siguin <body>, assegureu-vos de tenir un heightconjunt i overflow-y: scroll;aplicar.
  • Les àncores ( <a>) són necessàries i han d'apuntar a un element amb això id.

Quan s'ha implementat correctament, el vostre grup de navegació o llista s'actualitzarà en conseqüència, movent la .activeclasse d'un element a un altre en funció dels seus objectius associats.

Exemple a la barra de navegació

Desplaceu-vos per l'àrea de sota de la barra de navegació i observeu el canvi de classe activa. També es destacaran els elements desplegables.

@greix

Contingut de marcador de posició per a l'exemple de scrollspy. Tens la millor arquitectura. Segells de passaport, és cosmopolita. Bé, fresc, ferotge, ho tenim tancat. Mai havia planejat que algun dia et perdria. Ella et menja el cor. El teu petó és còsmic, cada moviment és màgic. Em refereixo als uns, vull dir com si fos ella. Salutacions éssers estimats, fem un viatge. Només has de tenir la nit com el 4 de juliol! Però prefereixes perdre't.

@mdo

Contingut de marcador de posició per a l'exemple de scrollspy. Perquè ella és la musa i l'artista. (Així és com ho fem) Així que vols jugar amb la màgia. Així que assegura't abans de donar-m'ho tot. Estic caminant, estic caminant per l'aire (aquesta nit). Salteu la xerrada, ho vaig sentir tot, és hora de caminar.

un

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

Contingut de marcador de posició per a l'exemple de scrollspy. Si vols ballar, si ho vols tot, saps que sóc la noia a qui hauries de trucar. Caminar per la tempesta ho faria. Així que deixa'm portar-te amb el teu vestit d'aniversari. El que es va escapar. Divendres passat a la nit, sí, crec que vam trencar la llei, sempre diem que pararem. Perquè ella és una mica de Yoko, i és una mica de "Oh, no". Vull que la mandíbula caigui, els ulls esclatin, el cap torni, el cos impacti. Sí, vam exhaurir les nostres targetes de crèdit i ens van expulsar del bar.

I més contingut de marcador de posició, en bona mesura.

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

Exemple amb navegació imbricada

Scrollspy també funciona amb .navs imbricats. Si un imbricat .navés .active, els seus pares també ho seran .active. Desplaceu-vos per l'àrea al costat de la barra de navegació i observeu el canvi de classe activa.

Element 1

Contingut de marcador de posició per a l'exemple de scrollspy. Aquest es relaciona amb l'element 1. Et porta quilòmetres alt, tan alt, perquè té aquest somriure internacional. Hi ha un desconegut al meu llit, hi ha un cop al meu cap. Oh, no. En una altra vida et faria quedar. Perquè jo sóc capaç de qualsevol cosa. Preparant-me per a la meva batalla final. Solia robar el licor dels teus pares i pujar al terrat. To, bronzejat i llest, puja-lo perquè es fa pesat. El seu amor és com una droga. Suposo que vaig oblidar que tenia una opció.

Tema 1-1

Contingut de marcador de posició per a l'exemple de scrollspy. Aquest es refereix a l'element 1-1. Tens la millor arquitectura. Segells de passaport, és cosmopolita. Bé, fresc, ferotge, ho tenim tancat. Mai havia planejat que algun dia et perdria. Ella et menja el cor. El teu petó és còsmic, cada moviment és màgic. Em refereixo als uns, vull dir com si fos ella. Salutacions éssers estimats, fem un viatge. Només has de tenir la nit com el 4 de juliol! Però prefereixes perdre't.

Tema 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

Contingut de marcador de posició per a l'exemple de scrollspy. Aquest es refereix al punt 3-2. Ets original, no es pot substituir. Tota la nit toquen, la teva cançó. Noies de Califòrnia som innegables. Com un ocell sense gàbia. Ara no hi ha por, deixa anar i sigues lliure, t'estimaré incondicionalment. Puc veure l'escriptura a la paret. Podríeu viatjar pel món, però res s'acosta a la costa daurada.

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

Exemple amb llista-grup

Scrollspy també funciona amb .list-groups. Desplaceu-vos per l'àrea al costat del grup de llista i observeu el canvi de classe activa.

Element 1

Contingut de marcador de posició per a l'exemple de grup de llista scrollspy. Aquest es relaciona amb el punt 1. No cal disculpes. Ara no hi ha por, deixa anar i sigues lliure, t'estimaré incondicionalment. La nit de divendres passat. No siguis un noi tímid, segur que és bonic. L'estiu després de l'institut quan ens vam conèixer. Perquè ella és la musa i l'artista. Què? Espera. Vaig pensar que jo era l'excepció.

Tema 2

Contingut de marcador de posició per a l'exemple de grup de llista scrollspy. Aquest es relaciona amb el tema 2. Sí, balla al seu propi ritme. Oh, no. Podries haver estat el més gran. Perquè, nena, ets un foc artificial. Potser un motiu pel qual totes les portes estan tancades. Obre el teu cor i deixa que comenci. Molt chic, sí, és un clàssic.

Tema 3

Contingut de marcador de posició per a l'exemple de grup de llista scrollspy. Aquest es relaciona amb el tema 3. Anem més i més amunt. Mai l'un sense l'altre, vam fer un pacte. Estic caminant per l'aire. Algú va dir que et van treure el tatuatge. Ara suro com una papallona. To, bronzejat i llest, puja-lo perquè es fa pesat. Perquè un cop ets meu, un cop ets meu. Només has d'encendre la llum i deixar-la brillar! Així que vam arribar al bulevard. Alguna vegada et sents tan prim com el paper. Ho veig tot, ho veig ara.

Tema 4

Contingut de marcador de posició per a l'exemple de grup de llista scrollspy. Aquest es relaciona amb el tema 4. Estiu després de l'institut quan ens vam conèixer. Ara no hi ha por, deixa anar i sigues lliure, t'estimaré incondicionalment. La pell besada pel sol tan calenta que fondrem el teu popsicle. Aquest amor et farà levitar.

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

Ús

Mitjançant atributs de dades

Per afegir fàcilment un comportament scrollspy a la vostra navegació de la barra superior, afegiu data-spy="scroll"-lo a l'element que voleu espiar (normalment seria el <body>). A continuació, afegiu l' data-targetatribut amb l'ID o la classe de l'element pare de qualsevol .navcomponent 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>

Mitjançant JavaScript

Després d'afegir position: relative;el vostre CSS, truqueu al scrollspy mitjançant JavaScript:

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

Es requereixen objectius d'identificació resolubles

Els enllaços de la barra de navegació han de tenir objectius d'identificació resolubles. Per exemple, un <a href="#home">home</a>ha de correspondre a alguna cosa al DOM com <div id="home"></div>.

S'han :visibleignorat els elements no objectiu

Els elements de destinació que no siguin :visiblesegons jQuery s'ignoraran i els seus elements de navegació corresponents no es ressaltaran mai.

Mètodes

.scrollspy('refresh')

Quan utilitzeu scrollspy juntament amb l'addició o eliminació d'elements del DOM, haureu de cridar el mètode d'actualització de la següent manera:

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

.scrollspy('dispose')

Destrueix el scrollspy d'un element.

Opcions

Les opcions es poden passar mitjançant atributs de dades o JavaScript. Per als atributs de dades, afegiu el nom de l'opció a data-, com a data-offset="".

Nom Tipus Per defecte Descripció
compensació nombre 10 Píxels a compensar des de la part superior quan es calcula la posició del desplaçament.
mètode corda automàtic Troba a quina secció es troba l'element espiat. autoEscollirà el millor mètode per obtenir les coordenades de desplaçament. offsetutilitzarà el mètode de compensació jQuery per obtenir les coordenades de desplaçament. positionutilitzarà el mètode de posició jQuery per obtenir les coordenades de desplaçament.
objectiu cadena | Objecte jQuery | Element DOM Especifica l'element per aplicar el connector Scrollspy.

Esdeveniments

Tipus d'esdeveniment Descripció
activate.bs.scrollspy Aquest esdeveniment s'activa a l'element de desplaçament cada cop que el scrollspy activa un element nou. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})