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.

Ko páhinape

Mba’éichapa omba’apo

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

Ojepuruvaꞌerã peteĩ Bootstrap nav componente térã lista aty rehe .
Scrollspy ojerure position: relative;pe elemento rehe reespiáva, jepivegua pe <body>.
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.

Umi mba’yru ojedesplazáva ha teclado jeike

Ejapóramo peteĩ mba’yru ojedesplazakuaáva (ndaha’éiva <body>), eñangareko eguereko peteĩ heightconjunto ha emoĩ overflow-y: scroll;hese —a ykére tabindex="0"easegura hag̃ua teclado jeike.

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

Peteĩha rubro

Kóva ha’e peteĩ contenido tenda’i rehegua scrollspy página-pe g̃uarã. Eñatendéke redesplaza jave pe páhinape, ojerresaltaha pe enlace de navegación oĩ porãva. Oje’e jey componente techapyrã pukukue javeve. Ñamoĩ meme ko’ápe peteĩ copia techapyrãve ñamomba’eguasu haĝua pe desplazamiento ha resaltado.

Mokõiha rubro

Mbohapyha vore

Irundyha vore

Pokõiha rubro

<nav id="navbar-example2" class="navbar navbar-light bg-light px-3">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#scrollspyHeading1">First</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#scrollspyHeading2">Second</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#scrollspyHeading3">Third</a></li>
        <li><a class="dropdown-item" href="#scrollspyHeading4">Fourth</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#scrollspyHeading5">Fifth</a></li>
      </ul>
    </li>
  </ul>
</nav>
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example" tabindex="0">
  <h4 id="scrollspyHeading1">First heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading2">Second heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading3">Third heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading4">Fourth heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading5">Fifth heading</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

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

<nav id="navbar-example3" class="navbar navbar-light bg-light flex-column align-items-stretch p-3">
  <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 ms-3 my-1" href="#item-1-1">Item 1-1</a>
      <a class="nav-link ms-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 ms-3 my-1" href="#item-3-1">Item 3-1</a>
      <a class="nav-link ms-3 my-1" href="#item-3-2">Item 3-2</a>
    </nav>
  </nav>
</nav>

<div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" tabindex="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 Artículo 2 rehegua Artículo 3 rehegua Artículo 4 rehegua

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-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" class="scrollspy-example" tabindex="0">
  <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-bs-spy="scroll"pe elemento ehechasévape (jepiveguaichavéva kóva ha’éta pe <body>). Upéi emoĩve data-bs-targetatributo orekóva ID térã clase elemento túva oimeraẽva .navcomponente Bootstrap rehegua.

body {
  position: relative;
}

<body data-bs-spy="scroll" data-bs-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:

var scrollSpy = new bootstrap.ScrollSpy(document.body, {
  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 destino ndojehecháiva oñemboyke

Umi elemento destino ndojehecháiva oñemboykéta ha umi elemento nav okorrespondéva araka’eve noñemomba’emo’ãi.

Método-kuéra rehegua

ombopyahu

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

var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
  bootstrap.ScrollSpy.getInstance(dataSpyEl)
    .refresh()
})

omboyke haguã

Ohundi peteĩ elemento scrollspy. (Oipeꞌa umi dato oñeñongatúva elemento DOM-pe)

ohupytyInstancia

Método estático ohejáva ndéve rehupyty hag̃ua instancia scrollspy ojoajúva peteĩ elemento DOM rehe

var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance

ohupytyTérãEjapoInstancia

Método estático ohejáva ndéve rehupyty instancia scrollspy ojoajúva peteĩ elemento DOM ndive, térã emoheñói peteĩ pyahu en caso noñemoñepyrũi

var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance

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-bs-, -peguáicha data-bs-offset="".

Téra	Hesegua	Upevakuére	Techaukaha
`offset`	papapy	`10`	Umi píxel ojedesplaza hag̃ua yvate guive oñekalkula jave posición desplazamiento rehegua.
`method`	sã	`auto`	Ojuhu mbaꞌe sección-pepa oĩ elemento espionado `auto`oiporavóta método iporãvéva ohupyty hag̃ua coordenada desplazamiento rehegua. `offset`oipurúta pe `Element.getBoundingClientRect()`método ohupyty hagua umi coordenada desplazamiento rehegua. `position`oipurúta umi propiedad ha ohupyty hag̃ua coordenada desplazamiento rehegua `HTMLElement.offsetTop`.`HTMLElement.offsetLeft`
`target`	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
`activate.bs.scrollspy`	Ko mbaꞌe ojehúva odispara elemento desplazamiento rehe oñemboguata jave peteĩ mbaꞌe pyahu scrollspy rupive.

var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
  // do something...
})

Scrollspy rehegua

Mba’éichapa omba’apo

Umi mba’yru ojedesplazáva ha teclado jeike

Tembiecharã navbar-pe

Peteĩha rubro

Mokõiha rubro

Mbohapyha vore

Irundyha vore

Pokõiha rubro

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 destino ndojehecháiva oñemboyke

Método-kuéra rehegua

ombopyahu

omboyke haguã

ohupytyInstancia

ohupytyTérãEjapoInstancia

Opciones rehegua

Umi mba’e oikóva