Ale nan kontni prensipal la Ale nan navigasyon dokiman yo
in English

Scrollspy

Otomatikman mete ajou navigasyon Bootstrap oswa lis eleman gwoup ki baze sou pozisyon woulo liv la pou endike ki lyen ki aktif kounye a nan fenèt la.

Nan paj sa a

Ki jan li fonksyone

Scrollspy gen kèk kondisyon pou fonksyone byen:

  • Li dwe itilize sou yon eleman nav Bootstrap oswa yon gwoup lis .
  • Scrollspy mande position: relative;sou eleman w ap espyonaj la, anjeneral, <body>.
  • Yo mande lank ( <a>) epi yo dwe montre yon eleman ki gen sa id.

Lè yo aplike avèk siksè, nav oswa gwoup lis ou a pral mete ajou kòmsadwa, deplase .activeklas la soti nan yon atik nan yon lòt ki baze sou objektif ki asosye yo.

Kontenè defilable ak aksè klavye

Si w ap fè yon veso defilable (ki pa <body>), asire w ke ou gen yon heightseri epi overflow-y: scroll;aplike nan li-ansanm ak yon tabindex="0"pou asire aksè klavye.

Egzanp nan navbar

Scroll zòn ki anba a navbar epi gade chanjman nan klas aktif. Atik dropdown yo pral make tou.

Premye tit

Sa a se kèk kontni anplasman pou paj scrollspy la. Remake byen ke pandan w ap desann paj la, lyen navigasyon apwopriye a make. Li repete nan tout egzanp eleman an. Nou kontinye ajoute kèk kopi egzanp plis isit la pou mete aksan sou defile a ak en.

Dezyèm tit

Sa a se kèk kontni anplasman pou paj scrollspy la. Remake byen ke pandan w ap desann paj la, lyen navigasyon apwopriye a make. Li repete nan tout egzanp eleman an. Nou kontinye ajoute kèk kopi egzanp plis isit la pou mete aksan sou defile a ak en.

Twazyèm tit

Sa a se kèk kontni anplasman pou paj scrollspy la. Remake byen ke pandan w ap desann paj la, lyen navigasyon apwopriye a make. Li repete nan tout egzanp eleman an. Nou kontinye ajoute kèk kopi egzanp plis isit la pou mete aksan sou defile a ak en.

Katriyèm tit

Sa a se kèk kontni anplasman pou paj scrollspy la. Remake byen ke pandan w ap desann paj la, lyen navigasyon apwopriye a make. Li repete nan tout egzanp eleman an. Nou kontinye ajoute kèk kopi egzanp plis isit la pou mete aksan sou defile a ak en.

Senkyèm tit

Sa a se kèk kontni anplasman pou paj scrollspy la. Remake byen ke pandan w ap desann paj la, lyen navigasyon apwopriye a make. Li repete nan tout egzanp eleman an. Nou kontinye ajoute kèk kopi egzanp plis isit la pou mete aksan sou defile a ak en.

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

Egzanp ak enbrike nav

Scrollspy travay tou ak .navs enbrike. Si yon enbrike .navse .active, paran li yo pral tou .active. Scroll zòn nan akote navbar la epi gade chanjman nan klas aktif.

Atik 1

Sa a se kèk kontni anplasman pou paj scrollspy la. Remake byen ke pandan w ap desann paj la, lyen navigasyon apwopriye a make. Li repete nan tout egzanp eleman an. Nou kontinye ajoute kèk kopi egzanp plis isit la pou mete aksan sou defile a ak en.

Atik 1-1

Sa a se kèk kontni anplasman pou paj scrollspy la. Remake byen ke pandan w ap desann paj la, lyen navigasyon apwopriye a make. Li repete nan tout egzanp eleman an. Nou kontinye ajoute kèk kopi egzanp plis isit la pou mete aksan sou defile a ak en.

Atik 1-2

Sa a se kèk kontni anplasman pou paj scrollspy la. Remake byen ke pandan w ap desann paj la, lyen navigasyon apwopriye a make. Li repete nan tout egzanp eleman an. Nou kontinye ajoute kèk kopi egzanp plis isit la pou mete aksan sou defile a ak en.

Atik 2

Sa a se kèk kontni anplasman pou paj scrollspy la. Remake byen ke pandan w ap desann paj la, lyen navigasyon apwopriye a make. Li repete nan tout egzanp eleman an. Nou kontinye ajoute kèk kopi egzanp plis isit la pou mete aksan sou defile a ak en.

Atik 3

Sa a se kèk kontni anplasman pou paj scrollspy la. Remake byen ke pandan w ap desann paj la, lyen navigasyon apwopriye a make. Li repete nan tout egzanp eleman an. Nou kontinye ajoute kèk kopi egzanp plis isit la pou mete aksan sou defile a ak en.

Atik 3-1

Sa a se kèk kontni anplasman pou paj scrollspy la. Remake byen ke pandan w ap desann paj la, lyen navigasyon apwopriye a make. Li repete nan tout egzanp eleman an. Nou kontinye ajoute kèk kopi egzanp plis isit la pou mete aksan sou defile a ak en.

Atik 3-2

Sa a se kèk kontni anplasman pou paj scrollspy la. Remake byen ke pandan w ap desann paj la, lyen navigasyon apwopriye a make. Li repete nan tout egzanp eleman an. Nou kontinye ajoute kèk kopi egzanp plis isit la pou mete aksan sou defile a ak en.

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

Egzanp ak gwoup lis

Scrollspy travay tou ak .list-groups. Scroll zòn ki akote gwoup lis la epi gade chanjman nan klas aktif.

Atik 1

Sa a se kèk kontni anplasman pou paj scrollspy la. Remake byen ke pandan w ap desann paj la, lyen navigasyon apwopriye a make. Li repete nan tout egzanp eleman an. Nou kontinye ajoute kèk kopi egzanp plis isit la pou mete aksan sou defile a ak en.

Atik 2

Sa a se kèk kontni anplasman pou paj scrollspy la. Remake byen ke pandan w ap desann paj la, lyen navigasyon apwopriye a make. Li repete nan tout egzanp eleman an. Nou kontinye ajoute kèk kopi egzanp plis isit la pou mete aksan sou defile a ak en.

Atik 3

Sa a se kèk kontni anplasman pou paj scrollspy la. Remake byen ke pandan w ap desann paj la, lyen navigasyon apwopriye a make. Li repete nan tout egzanp eleman an. Nou kontinye ajoute kèk kopi egzanp plis isit la pou mete aksan sou defile a ak en.

Atik 4

Sa a se kèk kontni anplasman pou paj scrollspy la. Remake byen ke pandan w ap desann paj la, lyen navigasyon apwopriye a make. Li repete nan tout egzanp eleman an. Nou kontinye ajoute kèk kopi egzanp plis isit la pou mete aksan sou defile a ak en.

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

Itilizasyon

Via atribi done yo

Pou ajoute fasilman konpòtman scrollspy nan navigasyon topbar ou a, ajoute data-bs-spy="scroll"nan eleman ou vle al rekonèt (pi tipikman sa a ta dwe <body>). Lè sa a, ajoute data-bs-targetatribi a ak ID oswa klas eleman paran nenpòt .naveleman Bootstrap.

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>

Via JavaScript

Apre w fin ajoute position: relative;CSS ou a, rele scrollspy via JavaScript:

var scrollSpy = new bootstrap.ScrollSpy(document.body, {
  target: '#navbar-example'
})

Objektif ID ki ka rezoud yo mande yo

Lyen Navbar yo dwe gen sib id ki ka rezoud. Pou egzanp, yon <a href="#home">home</a>dwe koresponn ak yon bagay nan DOM la tankou <div id="home"></div>.

Eleman sib ki pa vizib inyore

Eleman sib ki pa vizib yo pral inyore epi atik navigasyon korespondan yo p ap janm make.

Metòd

rafrechi

Lè w ap itilize scrollspy ansanm ak ajoute oswa retire eleman nan DOM, w ap bezwen rele metòd rafrechisman an konsa:

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

jete

Detwi scrollspy yon eleman. (Retire done ki estoke sou eleman DOM)

getInstance

Metòd estatik ki pèmèt ou jwenn egzanp scrollspy ki asosye ak yon eleman DOM

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

getOrCreateInstance

Metòd estatik ki pèmèt ou jwenn egzanp scrollspy ki asosye ak yon eleman DOM, oswa kreye yon nouvo nan ka li pa te inisyalize.

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

Opsyon

Opsyon yo ka pase atravè atribi done oswa JavaScript. Pou atribi done, ajoute non opsyon a nan data-bs-, tankou nan data-bs-offset="".

Non Kalite Default Deskripsyon
offset nimewo 10 Piksèl pou konpanse nan tèt lè w ap kalkile pozisyon woulo liv la.
method fisèl auto Jwenn nan ki seksyon eleman espyon an ye. autopral chwazi pi bon metòd pou jwenn kowòdone woulo liv la. offsetpral sèvi ak Element.getBoundingClientRect()metòd la pou jwenn kowòdone woulo liv. positionpral sèvi HTMLElement.offsetTopak HTMLElement.offsetLeftpwopriyete yo ak pou jwenn kowòdone woulo liv.
target fisèl | jQuery objè | Eleman DOM Espesifye eleman pou aplike Plugin Scrollspy.

Evènman

Kalite evènman Deskripsyon
activate.bs.scrollspy Evènman sa a dife sou eleman woulo liv la chak fwa yon nouvo atik vin aktive pa scrollspy la. 
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
  // do something...
})