in English

Scrollspy nisqa

Kikinmanta musuqchay Bootstrap puriyta utaq lista qutu componentekuna kuyuchiy posición kaqpi mayqin t'inki kunan qhawana punkupi ruwasqa kaqta rikuchinapaq.

Imayna llamkan

Scrollspy allin llamk'ananpaq huk pisi mañakuykunayuq:

  • Sichus JavaScriptniykumanta pukyuta ruwachkanki, chayta munanutil.js .
  • Huk Bootstrap nav componente utaq lista qutupi llamk'achisqa kanan tiyan .
  • Scrollspy mañan position: relative;chay elementopi espía ruwasqaykipi, aswantaqa chay <body>.
  • Cuando espía en elementos otros que el <body>, asegúrate de tener un heightconjunto y overflow-y: scroll;aplicado.
  • Anclas ( <a>) nisqakunan necesitakun, chaywantaqmi huk elementota señalananku id.

Allin ruwasqa kaqtin, nav utaq lista qutuyki chaymanhina musuqyachinqa, .activehuk elementomanta wak kaqman claseta kuyuchispa tinkisqa metakunankumanhina.

Ejemplo en navbar

Navbar urapi kaq áreata kuyuchiy chaymanta qhaway activo clase tikrayta. Chay urayk’aq kaqkunapas resaltasqa kanqa.

@wira

Scrollspy ejemplopaq churanakuna contenido. Aswan sumaq arquitecturatam chaskirqanki. Pasaporte sellokuna, payqa cosmopolita. Allin, musuq, sinchi, cerradurapi hapirqayku. Mana hayk'aqpas planearqanichu huk punchaw chinkachisqaykita. Payqa sunquykitam mikun. Muchasqaykiqa cósmico, sapa kuyuyqa magia. Niyta munani chaykunata, niyta munani pay hina. Napaykuykuna kuyasqakuna huk puriyta ruwasunchik. ¡Solo dueño la noche como el 4 de julio! Ichaqa aswan allinmi kanman usuchiyqa.

@mdo nisqa

Placeholder content for the scrollspy example. '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.

one

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

Scrollspy ejemplopaq churanakuna contenido. Si quieres danzar, si quieres todo, sabes que soy la muchacha que debes llamar. Puriy chay wayra-parata ñuqaman. Chaymi cumpleaños trajeykiwan churasqayki. Chay ayqikuq. Qayna viernes tuta, arí piensani leyta p’akisqaykumanta, siempre niyku sayasaqku nispa. 'Porque es un poco de Yoko, Y es un poco de 'Oh no'. Quiero la mandíbula droppin', ñawi poppin', cabeza turnin', cuerpo shockin'. Arí, tarjetaykuta max ruwarqayku hinaspan barmanta qarqowarqanku.

Hinallataq wakin aswan sitioyuq contenido, allin tupunapaq.

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

Ejemplo con nav anidado

Scrollspy llamkantaqmi anidado .navs nisqawanpas. Sichus huk nested .navkan chayqa .active, tayta-mamanpas kanqa .active. Navbarpa waqtanpi kaq áreata kuyuchiy chaymanta qhaway activo clase tikrayta.

Artículo 1

Scrollspy ejemplopaq churanakuna contenido. Kayqa tupanmi item 1. Apasunki kilómetros alto, ancha alto, 'causa payqa chay huk internacional sonrisayuqmi. Puñunaypi huk mana riqsisqa runa kachkan, umaypi huk takay kachkan. Ay, manam. Huk kawsaypiqa qhepachiykimanmi. ‘Porque yo, estoy capaz de cualquier cosa. Coronamiento maqanakuyniypaq hina. Ñawpaqtaqa tayta mamaykipa tragonta suwaspa wasi pataman wichaspa. Tono, tan apto y listo, girarlo hacia arriba causa su gettin 'pesado. Paypa kuyakuyninqa droga hinam. Suyasaqmi huk akllakuyniyuq kasqayta qunqarusqayta.

Artículo 1-1

Scrollspy ejemplopaq churanakuna contenido. Kayqa 1-1 yupaywanmi tupan. Aswan sumaq arquitecturatam chaskirqanki. Pasaporte sellokuna, payqa cosmopolita. Allin, musuq, sinchi, cerradurapi hapirqayku. Mana hayk'aqpas planearqanichu huk punchaw chinkachisqaykita. Payqa sunquykitam mikun. Muchasqaykiqa cósmico, sapa kuyuyqa magia. Niyta munani chaykunata, niyta munani pay hina. Napaykuykuna kuyasqakuna huk puriyta ruwasunchik. ¡Solo dueño la noche como el 4 de julio! Ichaqa aswan allinmi kanman usuchiyqa.

Artículo 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

Scrollspy ejemplopaq churanakuna contenido. Kayqa 3-2 yupaywanmi tupan. Qamqa originalmi kanki, manam tikrasqachu kanki. Tukuy tuta pukllachkanku, takiyki. California sipaskuna mana negay atina kayku. Mana jaulayuq pisqu hina. Kunanqa manan manchakuy kanchu, kachariy hinaspa libre kaylla, munakusqayki mana imamanta manchakuspa. Perqapi qillqasqata rikuni. Kay pachata puriwaqmi ichaqa manan imapas qori costaman asuykunchu.

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

Lista-grupo nisqawan ejemplo

.list-groupScrollspy nisqapas s nisqawanmi llamkan . Lista qutupa waqtanpi kaq chiqanpi puriy chaymanta qhaway activo clase tikrayta.

Artículo 1

Scrollspy lista-huñu rikch'anapaq tiyanakunap kaqnin. Kayqa 1 kaq t’aqawanmi tupan.Ama disculpakuyta necesitankichu. Kunanqa manan manchakuy kanchu, kachariy hinaspa libre kaylla, munakusqayki mana imamanta manchakuspa. Qayna viernes tuta. No ser un shy kinda guy apuestaré que es hermoso. Colegiomanta qhipaman verano ñawpaq kutita riqsinakusqaykupi. ‘Porque ella es la musa y la artista. Ima? Suyay. Yuyarqanim ñuqa chay excepción kasqayta.

Artículo 2

Scrollspy lista-huñu rikch'anapaq tiyanakunap kaqnin. Kayqa 2 kaq itemwanmi tupan.Arí, payqa kikinpa takyasqanman hinam tusun. Ay, manam. Qamqa aswan hatunmi kayta atiwaq karqa. ‘Porque, waway, nina rawraymi kanki. Ichapas huk razon imarayku llapa punkukuna wisq’asqa kachkan. Sonqoykita kichariy hinaspa qallarinanpaqlla saqey. Chaymi très chic, arí, payqa huk clásico.

Artículo 3

Scrollspy lista-huñu rikch'anapaq tiyanakunap kaqnin. Kayqa 3 kaq t’aqawanmi tupan, aswan hatunmanmi rinchik. Mana hayk’aqpas huknin mana hukninwanqa, huk pactota ruwarqayku. Wayrapi purichkani. Pipas nirqam tatuajeykita hurqurusqaykita. Kunanqa pillpintu hinam unupi purichkani. Tono, tan apto y listo, girarlo hacia arriba causa su gettin 'pesado. Causa una vez que eres mi, una vez que eres mi. ¡Solo tienes que encender la luz y deja que brillan! Chaymi chay bulevarman tuparqayku. ¿Hayk’aqllapas sientenkichu, sintikunki chay hina papel llañu. Tukuy chayta rikuni, kunan rikuni.

Artículo 4

Scrollspy lista-huñu rikch'anapaq tiyanakunap kaqnin. Kayqa tupanmi item 4. Verano después de colegio ñawpaq kuti tupasqaykupi. Kunanqa manan manchakuy kanchu, kachariy hinaspa libre kaylla, munakusqayki mana imamanta manchakuspa. Intiwan much’asqa qara ancha ruphasqa palomitaykita chulluchisaqku. Kay munakuymi levitacionta ruwasunki.

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

Uso

Atributos de datos nisqawan

Scrollspy ruwayta mana sasachu yapanaykipaq pata barra puriyniykiman, yapay data-spy="scroll"elementoman yapay mayqinpichus espionayta munanki (aswan típicamente kay kanman chay <body>). Chaymanta yapay data-targetatributo ID kaqwan utaq clase kaqwan tayta elementomanta mayqin Bootstrap .navcomponente kaqmanta.

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>

JavaScript nisqawan

CSS nisqaykipi yapasqaykimanta position: relative;, JavaScript nisqawan scrollspy nisqaman waqyay:

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

ID nisqa allichanapaq metakuna necesitakun

Navbar t'inkikuna allichanapaq id metakunayuq kanan tiyan. Ejemplopaq, a <a href="#home">home</a>DOM nisqapi imawanpas tupananmi imaynan <div id="home"></div>.

Mana :visiblemeta nisqa elementokuna mana qhawasqa

:visibleJQuery kaqmanhina mana elementokuna meta kaqmanta mana qhawasqachu kanqa chaymanta tupaq nav elementokuna mana hayk'aqpas resaltasqachu kanqa.

Métodos

.scrollspy('refresh')

Scrollspy DOM kaqmanta elementokuna yapay utaq hurquywan kuska llamk'achkaspa, musuqyachiy ñanta chayhina waqyanayki tiyan:

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

.scrollspy('dispose')

Huk elementopa scrollspy nisqatam chinkachin.

Akllanakuna

Akllanakuna willay layakuna utaq JavaScript kaqnintakama pasayta atikun. Willayta layakunapaq, akllana sutita yapay data-, imaynachus data-offset="".

Suti Niraq Ñawpaqchasqa Willay
offset nisqa yupay 10. 10 Pixelkuna patamanta offset kananpaq, kuyuypa posiciónninta yupaspa.
imayna qaytu auto Tarin mayqin t'aqapichus elemento espionado kachkan autochayta akllanqa aswan allin ruwayta coordenadas de desplazamiento jap'inapaq. offsetjQuery offset métodota llamk'achinqa kuyuchiy coordenadas nisqakunata tarinapaq. positionjQuery posición método llamk'achinqa desplazamiento coordenadas chaskinapaq.
chayana q'aytu | jTapukuy objeto | Elemento DOM nisqa Scrollspy plugin churanapaq elemento nisqa.

Eventos nisqakuna

Tipo de Evento Willay
activar.bs.scrollspy nisqa Kay ruwayqa kuyuchina elementopi rawrarin mayk'aqllapas huk musuq elemento scrollspy kaqwan llamk'achisqa kaptin. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})