Source

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

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 mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

one

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.

two

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

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

Cillum nisi deserunt magna eiusmod qui eiusmod velit voluptate pariatur laborum sunt enim. Irure laboris mollit consequat incididunt sint et culpa culpa incididunt adipisicing magna magna occaecat. Nulla ipsum cillum eiusmod sint elit excepteur ea labore enim consectetur in labore anim. Proident ullamco ipsum esse elit ut Lorem eiusmod dolor et eiusmod. Anim occaecat nulla in non consequat eiusmod velit incididunt.

Item 2

Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse irure. Laborum nisi sit est tempor laborum mollit labore officia laborum excepteur commodo non commodo dolor excepteur commodo. Ipsum fugiat ex est consectetur ipsum commodo tempor sunt in proident.

Item 3

Quis anim sit do amet fugiat dolor velit sit ea ea do reprehenderit culpa duis. Nostrud aliqua ipsum fugiat minim proident occaecat excepteur aliquip culpa aute tempor reprehenderit. Deserunt tempor mollit elit ex pariatur dolore velit fugiat mollit culpa irure ullamco est ex ullamco excepteur.

Item 3-1

Deserunt quis elit Lorem eiusmod amet enim enim amet minim Lorem proident nostrud. Ea id dolore anim exercitation aute fugiat labore voluptate cillum do laboris labore. Ex velit exercitation nisi enim labore reprehenderit labore nostrud ut ut. Esse officia sunt duis aliquip ullamco tempor eiusmod deserunt irure nostrud irure. Ullamco proident veniam laboris ea consectetur magna sunt ex exercitation aliquip minim enim culpa occaecat exercitation. Est tempor excepteur aliquip laborum consequat do deserunt laborum esse eiusmod irure proident ipsum esse qui.

Item 3-2

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

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

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

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…
})