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.

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

@ñandy

Polainas de anuncios keytar, brunch id arte partido dolor labore rehegua. Horquilla yr enim lo-fi ovende mboyve hikuái qui. Tumblr derecho bicicleta granja-a-mesa taha'e ha'éva. Anim keffiyeh carles cardigan rehegua. Velit seitan mcsweeney foto cabina 3 lobo jasy irure. Cosby suéter lomo jean shorts, williamsburg sudadera minim qui oiméne nerehendúi hesekuéra et cardigan fondo fiduciario culpa biodiesel wes anderson estética. Nihil tatuado acusamus, cred ironía biodiésel keffiyeh artesano ullamco consequat rehegua.

@mdo rehegua

Veniam marfa patineta bigote, adipisicing fugiat velit horquilla barba. Freegan barba aliqua cupidatat mcsweeney rehegua vero. Cupidatat irundy loko nisi, ea helvetica nulla carles. Tatuado cosby suéter camión de alimentos, mcsweeney's quis vinilo no freegan rehegua. Lo-fi wes anderson +1 sartorial rehegua. Carles ejercicio no estético quis gentrificación rehegua. Brooklyn adipisicing artesanía cerveza vice keytar deserunt rehegua.

peteĩ

Occaecat commodo aliqua delectus rehegua. Fap artesanía cerveza deserunt patineta ea. Lomo bicicleta derecho adipisicing banh mi, velit ea sunt nivel oúva locavore café de origen único en magna veniam. Vinilo id de vida yvate, eco parque consequat quis aliquip banh mi horquilla. Vero VHS est adipisicing rehegua. Consectetur nisi DIY mínimo mensajero vosa rehegua. Cred ex en, sostenible delectus consectetur fanny pack iphone rehegua.

mokõi

En incididunt eco parque, officia deserunt mcsweeney proident maestro omopotî arasunu sapiente veniam. Excepteur VHS élit, proident shoreditch +1 biodiésel laborum cerveza artesanal rehegua. Umi tape ohóva café de origen único irure irundy loko, cupidatat terry richardson maestro omopotî. Assumenda oiméne nerehendúi chuguikuéra arte fiesta fanny pack, tatuado nulla cardigan temporal anuncio. Proident lobo nesciunt sartorial keffiyeh eu banh mi sostenible rehegua. Elit lobo voluptate, lo-fi ea portland ovende mboyve hikuái irundy loko. Locavore enim nostrud mlkshk arroyo nesciunt rehegua.

mbohapy

Keytar twee blog, culpa mensajero bolso marfa taha'e ha'éva delectus camión hi'upyrã. Sapiente sintet id asumida rehegua. Locavore sed helvetica cliche ironía, truenos oiméne nerehendúiva chuguikuéra consequat sudadera con capucha sin gluten lo-fi fap aliquip. Labore elit placeat oñevende mboyve hikuái, terry richardson proident brunch nesciunt quis cosby suéter pariatur keffiyeh ut helvetica artesano. Cardigan cerveza artesanal seitan velit listo rehegua. VHS chambray laboris venam temporal rehegua. Anim mollit mínimo commodo ullamco arasunukuéra.

<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-haspopup="true" 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

Ex consequat commodo adipisicing ejercicio aute excepteur occaecat ullamco rehegua id magna ullamco eu. Ojapo aute ipsum ipsum ullamco cillum consectetur ha aute consectetur rembiapo. Fugiat laborum incididunt temporal eu consequat enim dolore proident rehegua. Qui laborum do non excepteur nulla magna eiusmod consectetur in. Aliqua ha ambuekuéra oficia quis ha incididunt voluptate ndaha'éiva mymba reprehenderit adipisicing dolore ut consequat deserunt mollit dolore. Aliquip nulla enim veniam no fugiat id cupidatat nulla elit cupidatat commodo velit ut eiusmod cupidatat elit dolore rehegua.

Artículo 1-1 rehegua

Amet temporal mollit aliquip pariatur exceptor commodo ojapo ea cillum commodo Lorem ha occaecat elit qui et. Aliquip omba'apo ex ex esse voluptate occaecat Lorem ullamco deserunt rehegua. Aliqua cillum excepteur irure consequat rehegua id quis ea. Oguapy proident ullamco aute magna pariatur nostrud tembiapo. Reprehenderit aliqua commodo eiusmod aliquip est do duis amet proidente magna consectetur consequat eu commodo fugiat no quis rehegua. Enim aliquip ejercicio ullamco adipisicing voluptate excepteur mínimo ejercicio mínimo mínimo commodo adipisicing ejercicio officia nisi adipisicing rehegua. Anim id duis qui consequat trabajo adipisicing sint dolor elit cillum anim ha fugiat rehegua.

Artículo 1-2 rehegua

Cillum nisi deserunt magna eiusmod qui eiusmod velit voluptate pariatur laborum sunt enim rehegua. Irure laboris mollit consecuación incididunt sint ha culpa culpa incididunt adipisicing magna magna occaecat rehegua. Nulla ipsum cillum eiusmod sint elit excepteur ea mba'apo enim consectetur en trabajo anim. Proident ullamco ipsum esse elit ut Ñe'ẽpoty ha ñe'ẽpoty ha ñe'ẽpoty ñemohenda. Anim occaecat nulla en incididunt velit eiusmod no consecuado rehegua.

Artículo 2 rehegua

Quis magna Lorem anim amet ipsum ojapo mollit oguapy cillum voluptate ex nulla temporal. Laborum consequat no elit enim ejercicio cillum aliqua rehegua consequat id aliqua rehegua. Esse ex consectetur mollit voluptate est en duis laboris ad sit ipsum mymbakuéra Lorem rehegua. Incidido veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt oguapy enim elit aliqua esse irure. Laborum nisi sit est temporal laborum mollit labore oficia laborum exceptor commodo ndaha'éiva commodo dolor exceptor commodo. Ipsum fugiat ex est consectetur ipsum commodo temporal sunt en proident rehegua.

Artículo 3 rehegua

Quis anim oguapy ojapo amet fugiat dolor velit oguapy ea ea ojapo reprehenderit culpa duis. Nostrud aliqua ipsum fugiat mínimo proident occaecat excepteur aliquip culpa aute temporal reprehenderit rehegua. Deserunt temporal mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco exceptor rehegua.

Artículo 3-1 rehegua

Deserunt quis elit Lorem eiusmod amet enim enim amet mínimo Lorem proident nostrud rehegua. Ea id dolore anim ejercicio aute fugiat rembiapo voluptate cillum ojapo laboris rembiapo. Ex velit ejercicio nisi enim tembiapo reprehenderit tembiapo nostrud ut ut. Esse oficia sunt duis aliquip ullamco temporal eiusmod deserunt irure nostrud irure rehegua. Ullamco proident veniam laboris ea consectetur magna sunt ejercicio rehegua aliquip mínimo enim culpa occaecat ejercicio rehegua. Est tempor excepteur aliquip laborum consequat ojapo deserunt laborum esse eiusmod irure proident ipsum esse qui.

Artículo 3-2 rehegua

Labore oguapy culpa commodo elit adipisicing oguapy aliquip elit proident voluptate mínimo mollit nostrud aute reprehenderit ojapo. Mollit excepteur eu Lorem ipsum anim commodo sint trabajo Lorem en ejercicio velit incididunt rehegua. Occaecat consectetur nisi en occaecat proident mínimo enim sunt reprehenderit ejercicio cupidatat ha ojapo oficia. Aliquip consequat ad mba'apo rembiapo mollit ut amet. Oguapy pariatur temporal proident en veniam culpa aliqua excepteur elit magna fugiat eiusmod amet oficia.

<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 Artículo 2 Artículo 3 Artículo 4

Artículo 1 rehegua

Artículo 2 rehegua

Artículo 3 rehegua

Artículo 4 rehegua

<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 `:visible`blanco 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 `auto`oiporavóta método iporãvéva ohupyty coordenadas desplazamiento. `offset`oipurúta jQuery método desplazamiento rehegua ohupyty hag̃ua umi coordenada desplazamiento rehegua. `position`oipurúta jQuery posición método ohupyty hag̃ua umi coordenada desplazamiento rehegua.
morotĩ	sã		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…
})

Scrollspy rehegua

Mba’éichapa omba’apo

Tembiecharã navbar-pe

@ñandy

@mdo rehegua

peteĩ

mokõi

mbohapy

Techapyrã orekóva nav anidado

Artículo 1 rehegua

Artículo 1-1 rehegua

Artículo 1-2 rehegua

Artículo 2 rehegua

Artículo 3 rehegua

Artículo 3-1 rehegua

Artículo 3-2 rehegua

Techapyrã lista-grupo ndive

Artículo 1 rehegua

Artículo 2 rehegua

Artículo 3 rehegua

Artículo 4 rehegua

Jeporu rehegua

Umi atributo de datos rupive

JavaScript rupive

Oñeikotevë umi meta ID oresolvéva

Umi elemento ndaha’éiva :visibleblanco oñemboyke

Método-kuéra rehegua

.scrollspy('refresh')

.scrollspy('dispose')

Opciones rehegua

Umi mba’e oikóva

Umi elemento ndaha’éiva `:visible`blanco oñemboyke

`.scrollspy('refresh')`

`.scrollspy('dispose')`