in English

Scrollspy rehegua

Embopyahu ijeheguiete Bootstrap jeguata térã lista aty componentekuéra oñemopyendáva desplazamiento ñemohenda rehe ohechauka hag̃ua mbaꞌe joajuhapa oĩ koꞌág̃aite activo jehechaukaha-pe.

Mba’éichapa omba’apo

Scrollspy oguereko mbovymi mba’e ojejeruréva omba’apo porã hag̃ua:

  • Emopu’ãramo ore JavaScript ypykue guive, oikotevẽutil.js .
  • Ojepuruvaꞌerã peteĩ Bootstrap nav componente térã lista aty rehe .
  • Scrollspy ojerure position: relative;pe elemento rehe reespiáva, jepivegua pe <body>.
  • Ojeespiávo umi elemento ndaha'éiva pe <body>, katuete oreko peteĩ heightconjunto ha overflow-y: scroll;ojeaplika.
  • Oñeikotevë ancla ( <a>) ha oapuntava'erã peteî elemento orekóva upéva id.

Oñemoañetévo hekopete, ne nav térã lista aty ombopyahúta he’iháicha, ombohasávo .activembo’esyry peteĩ mba’égui ambuépe oñemopyendáva umi mba’e’oka ojoajúva rehe.

Tembiecharã navbar-pe

Emoinge pe área oĩva navbar guýpe ha ehecha pe clase activa ñemoambue. Umi mba’e ojeguerohorýva ojehechaukáta avei.

@ñandy

Contenido tenda rehegua scrollspy techapyrãme g̃uarã. Rehupyty pe arquitectura iporãvéva. Sellos de pasaporte, ha'e cosmopolita. Iporã, ipyahúva, mbarete, roguereko cerradura-pe. Araka'eve ndaplaneái peteĩ ára ndeperdetaha. Ha'e ho'u nde py'a. Nde beso ha’e cósmico, opa movimiento ha’e mágia. Che ha'ese umi, ha'ese ha'ete ku ha'éva pe. Maitei jahayhúva jajapo peteĩ jeguata. ¡Sólo propio pyhare 4 de julio-icha! Péro nde rejedesperdicia porãve.

@mdo rehegua

Contenido tenda rehegua scrollspy techapyrãme g̃uarã. 'Porque ha'e pe musa ha pe artista. (Péicha rojapo) Upéicharõ reñembosaráise magia rehe. Upévare eime porãnte remeʼẽ mboyve chéve opa mbaʼe. Che aguata hína, aguata hína aire ári (ko pyharépe). Salta pe discurso, ohendu opa mba’e, tiempo oguata haĝua pe jeguata.

peteĩ

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

Contenido tenda rehegua scrollspy techapyrãme g̃uarã. Rejerokyséramo, reipotáramo opa mba'e, reikuaa che ha'eha pe mitãkuña rehenóiva'erã. Oguata pe tormenta che ajapótava rupi. Upévare ehejami tagueraha ndéve nde traje de cumpleaños-pe. Pe ojehekýiva’ekue. Viernes ohasava'ekuépe pyhare, heẽ che aimo'ã roviola hague léi, akóinte ja'e jajokotaha. 'Causa ha'e michĩmi Yoko-gui, Ha ha'e michĩmi 'Oh no'. Che aipota pe mandibula droppin ', tesa poppin ', iñakã turnin ', cuerpo shockin '. Heẽ, romax ore tarjeta de crédito ha roñemosẽ pe bar-gui.

Ha oĩve contenido tenda’i rehegua, medida porãme g̃uarã.

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

Techapyrã orekóva nav anidado

Scrollspy ombaꞌapo avei .navs anidado reheve. Peteĩ anidado .navha'éramo .active, ituvakuéra ha'éta avei .active. Emoinge pe área oĩva navbar ykére ha ehecha pe clase activa ñemoambue.

Artículo 1 rehegua

Contenido tenda rehegua scrollspy techapyrãme g̃uarã. Kóva oñerrelaciona ítem 1. Ndegueraha kilómetro yvate, yvateterei, 'causa ha'e oreko upe peteĩ sonrisa internacional. Oĩ peteĩ extraño che tupape, oĩ peteĩ golpe che akãme. Oh, nahániri. Ambue tekovépe che ajapo va'erãmo'ã repyta haguã. 'Causa che, che capaz oimeraẽ mba'épe. Oñembosako’ívo che batalla coronadora-pe ĝuarã. Ojepokuaa omonda hagua nde tuvakuéra licor ha ojupi hagua techo ári. Tono, tan apto ha listo, ombojere ha'e yvate causa su gettin 'heavy. Imborayhu ha’ete peteĩ droga. Aimo’ã cheresarái hague arekoha peteĩ elección.

Artículo 1-1 rehegua

Contenido tenda rehegua scrollspy techapyrãme g̃uarã. Kóva oñe’ẽ pe punto 1-1 rehe. Rehupyty pe arquitectura iporãvéva. Sellos de pasaporte, ha'e cosmopolita. Iporã, ipyahúva, mbarete, roguereko cerradura-pe. Araka'eve ndaplaneái peteĩ ára ndeperdetaha. Ha'e ho'u nde py'a. Nde beso ha’e cósmico, opa movimiento ha’e mágia. Che ha'ese umi, ha'ese ha'ete ku ha'éva pe. Maitei jahayhúva jajapo peteĩ jeguata. ¡Sólo propio pyhare 4 de julio-icha! Péro nde rejedesperdicia porãve.

Artículo 1-2 rehegua

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

Contenido tenda rehegua scrollspy techapyrãme g̃uarã. Kóva oñe’ẽ pe punto 3-2 rehe. Nde ha'e original, ndaikatúi oñemyengovia. Pyhare pukukue ombopu hikuái, nde purahéi. Mitãkuña California-gua ore ha'e innegable. Guyra ndoguerekóiva jaula-icha. Ndaipóri kyhyje ko'ágã, eheja ha eime sãsõnte, rohayhúta incondicionalmente. Ahecha pe jehaipyre oĩva pe parére. Ikatu reviaha ko mundo ha katu mba’eve noñemoaguĩri pe costa de oro-gui.

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

Techapyrã lista-grupo ndive

Scrollspy omba’apo avei .list-groups ndive. Emoinge pe área oĩva lista aty ykére ha ehecha pe clase activa ñemoambue.

Artículo 1 rehegua

Contenido tenda’i rehegua scrollspy lista-grupo techapyrãme g̃uarã. Kóva ojoaju punto 1. Ani reikotevẽ disculpa. Ndaipóri kyhyje ko'ágã, eheja ha eime sãsõnte, rohayhúta incondicionalmente. Viernes ohasava'ekuépe pyhare. Ani ha'e peteĩ tipo tímido tipo apostáta iporãha. Verano secundaria rire rojotopa ypy ramo guare. 'Porque ha'e pe musa ha pe artista. Mba'épa? Eha'arõ. Opensa che ha’eha pe excepción.

Artículo 2 rehegua

Contenido tenda’i rehegua scrollspy lista-grupo techapyrãme g̃uarã. Kóva oñerrelaciona ítem 2. Heẽ, ha’e ojeroky ibatido-pe. Oh, nahániri. Ikatu kuri nde ha'e pe tuichavéva. ‘Porque, che memby, nde ha’e peteĩ fuego artificial. Ikatu peteĩ mbaʼérepa oñembotypaite umi okẽ. Eipe’a nde korasõ ha eheja toñepyrũnte. Upéicha très chic, heẽ, ha'e peteĩ clásico.

Artículo 3 rehegua

Contenido tenda’i rehegua scrollspy lista-grupo techapyrãme g̃uarã. Kóva oñerrelaciona ítem 3. Jaha yvateve ha yvateve. Araka’eve peteĩva ambue’ỹre, rojapo peteĩ pacto. Che aguata hína aire ári. Oĩ he’íva ojeipe’a hague nde tatuaje. Ko'ágã che atyryry peteĩ mariposa-icha. Tono, tan apto ha listo, ombojere ha'e yvate causa su gettin 'heavy. Causa una vez nde ha'e che mba'e, una vez nde ha'e che mba'e. ¡Remyendyva’erãnte pe tesape ha reheja tomimbi! Upévare rogolpea pe bulevar-pe. ¿Reñandu piko araka’eve, reñandu upéicha kuatia ipire hũ. Ahechapaite, ahecha ko’ágã.

Artículo 4 rehegua

Contenido tenda’i rehegua scrollspy lista-grupo techapyrãme g̃uarã. Kóva oñerrelaciona pe punto 4. Verano secundaria rire rojotopa ypy ramo guare. Ndaipóri kyhyje ko'ágã, eheja ha eime sãsõnte, rohayhúta incondicionalmente. Kuarahy ohetũva pire hakueterei roñemongu'éta nde palomita. Ko mborayhu penemongu’éta.

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

Jeporu rehegua

Umi atributo de datos rupive

Oñemoĩ hag̃ua scrollspy jeiko pya’e nde barra yvategua jeguatarãme, emoĩve data-spy="scroll"pe elemento ehechasévape (jepiveguaichavéva kóva ha’éta pe <body>). Upéi emoĩve data-targetatributo orekóva ID térã clase elemento túva oimeraẽva .navcomponente Bootstrap rehegua.

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 rupive

Emoĩ rire position: relative;nde CSS-pe, ehenói scrollspy-pe JavaScript rupive:

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

Oñeikotevë umi meta ID oresolvéva

Umi enlace Navbar oguerekova’erã umi meta id oñemyatyrõva. Techapyrã, a <a href="#home">home</a>okorrespondevaꞌerã peteĩ mbaꞌe DOM-pe haꞌeháicha <div id="home"></div>.

Umi elemento ndaha’éiva :visibleblanco oñemboyke

Umi elemento destino ndaha’éiva :visiblejQuery he’iháicha oñemboykéta ha umi elemento nav okorrespondéva araka’eve noñemomba’emo’ãi.

Método-kuéra rehegua

.scrollspy('refresh')

Eipuru jave scrollspy ojoajúvo emoĩ térã eipeꞌa elemento DOM-gui, tekotevẽta ehenói método ñembopyahu péicha:

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

.scrollspy('dispose')

Ohundi peteĩ elemento scrollspy.

Opciones rehegua

Umi opción ikatu oñembohasa atributo de datos térã JavaScript rupive. Umi atributo dato rehegua, emoĩ opción réra data-, -peguáicha data-offset="".

Téra Hesegua Upevakuére Techaukaha
desplazamiento rehegua papapy 10 rehegua Umi píxel ojedesplaza hag̃ua yvate guive oñekalkula jave posición desplazamiento rehegua.
tapereko sã auto rehegua Ojuhu mbaꞌe sección-pepa oĩ elemento espionado autooiporavóta método iporãvéva ohupyty hag̃ua coordenada desplazamiento rehegua. offsetoipurúta jQuery método desplazamiento rehegua ohupyty hag̃ua umi coordenada desplazamiento rehegua. positionoipurúta jQuery posición método ohupyty hag̃ua umi coordenada desplazamiento rehegua.
morotĩ cadena rehegua | jQuery mba'e | Elemento DOM rehegua Omombeꞌu elemento ojepuru hag̃ua Scrollspy plugin.

Umi mba’e oikóva

Tipo de Evento rehegua Techaukaha
omomba’apo.bs.scrollspy Ko mbaꞌe ojehúva odispara elemento desplazamiento rehe oñemboguata jave peteĩ mbaꞌe pyahu scrollspy rupive. 
$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
  // do something...
})