Skrol dɛn we de na di skrol

Ɔtomɛtik ɔpdet Bootstrap nevigishɔn ɔ list grup kɔmpɔnɛnt dɛn bays pan skrol pozishɔn fɔ sho us link de aktiv naw na di viupɔt.

Na dis pej

Aw i de wok

Scrollspy de toggle di .activeklas pan ankɔ ( <a>) ɛlimɛnt dɛn we di ɛlimɛnt wit di idrɛfrɛns bay di ankɔ in hrefdɛn skrol insay di vishɔn. Scrollspy na di bɛst we fɔ yuz am togɛda wit wan Bootstrap nav kɔmpɔnɛnt ɔ list grup , bɔt i go wok bak wit ɛni ankɔ ɛlimɛnt dɛn na di pej we de naw. Na so i de wok.

Fɔ bigin, skrol dɛn nid tu tin dɛn: wan nevigishɔn, wan list grup, ɔ wan simpul sɛt fɔ link dɛn, ɛn wan kɔntena we yu kin skrol. Di kɔntena we yu kin skrol kin bi di <body>ɔ kɔstɔm ɛlimɛnt wit sɛt heightɛn overflow-y: scroll.
Na di kɔntena we yu kin skrol, ad data-bs-spy="scroll"ɛn data-bs-target="#navId"usay navIdna di wan idwe de fɔ di nevigishɔn we gɛt fɔ du wit am. Mek shɔ se yu put wan bak tabindex="0"fɔ mek shɔ se yu gɛt di kibɔd.
As yu de skrol di “spied” kɔntena, dɛn .activego ad wan klas ɛn pul am na di ankɔ link dɛn insay di nevigishɔn we gɛt fɔ du wit am. Links fɔ gɛt idtarget dɛn we dɛn kin sɔlv, ɔdasay dɛn nɔ go tek dɛn. Fɔ ɛgzampul, a <a href="#home">home</a>fɔ kɔrɛkt to sɔntin na di DOM lɛk<div id="home"></div>
Dɛn go ignore di target elemɛnt dɛn we nɔ de si. Si di say we se Nɔn-visible elements sɛkshɔn dɔŋ ya.

Ɛgzampul dɛn

Skrol di eria we de dɔŋ di navbar ɛn wach di aktif klas chenj. Opin di drɔpdɔwn mɛnyu ɛn wach di drɔpdɔwn tin dɛn we de aylayt bak.

Fɔs ɛd

Dis na sɔm pleshɔlda kɔntinyu fɔ di skrolspy pej. Notis se as yu de skrol dɔŋ di pej, di rayt say fɔ go na di pej go aylayt. I de ripit ɔlsay na di kɔmpɔnɛnt ɛgzampul. Wi kin kɔntinyu fɔ ad sɔm ɔda ɛgzampul kɔpi ya fɔ mek wi no mɔ bɔt di skrol ɛn aylayt.

Sɛkɔn ɛd

Tɔd ɛd

Di nɔmba 4 edlayn

Di nɔmba fayv edlayn

<nav id="navbar-example2" class="navbar bg-light px-3 mb-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-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" class="scrollspy-example bg-light p-3 rounded-2" 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>

Nav we dɛn dɔn nest

Scrollspy de wok bak wit nested .navs. If wan nest .navde .active, in mama ɛn papa dɛnsɛf go bi .active. Skrol di eria nia di navbar ɛn wach di aktif klas chenj.

Aytem 1 we de sho aw fɔ du dat

Yu fɔ mɛmba se di JavaSkript plɔgin de tray fɔ pik di rayt tin pan ɔl di tin dɛn we pɔsin kin si. Bɔku bɔku skrolspi target dɛn we pɔsin kin si di sem tɛm kin mek sɔm prɔblɛm dɛn apin.

Aytem 1-1 we de sho aw fɔ du dis

Aytem 1-2 we de sho aw fɔ du dis

Aytem 2 we de sho aw fɔ du dat

Aytem 3 we de sho aw fɔ du dat

Aytem 3-1 fɔ di Baybul

Aytem 3-2 we de sho aw fɔ du dis

<div class="row">
  <div class="col-4">
    <nav id="navbar-example3" class="h-100 flex-column align-items-stretch pe-4 border-end">
      <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>

  <div class="col-8">
    <div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-smooth-scroll="true" class="scrollspy-example-2" tabindex="0">
      <div id="item-1">
        <h4>Item 1</h4>
        <p>...</p>
      </div>
      <div id="item-1-1">
        <h5>Item 1-1</h5>
        <p>...</p>
      </div>
      <div id="item-1-2">
        <h5>Item 1-2</h5>
        <p>...</p>
      </div>
      <div id="item-2">
        <h4>Item 2</h4>
        <p>...</p>
      </div>
      <div id="item-3">
        <h4>Item 3</h4>
        <p>...</p>
      </div>
      <div id="item-3-1">
        <h5>Item 3-1</h5>
        <p>...</p>
      </div>
      <div id="item-3-2">
        <h5>Item 3-2</h5>
        <p>...</p>
      </div>
    </div>
  </div>
</div>

Lista di grup

Scrollspy de wok bak wit .list-groups. Skrol di eria nia di list grup ɛn wach di aktif klas chenj.

Aytem 1 we de sho aw fɔ du dat Aytem 2 we de sho aw fɔ du dat Aytem 3 we de sho aw fɔ du dat Aytem 4 we de sho aw fɔ du dat

Aytem 1 we de sho aw fɔ du dat

Aytem 2 we de sho aw fɔ du dat

Aytem 3 we de sho aw fɔ du dat

Aytem 4 we de sho aw fɔ du dat

<div class="row">
  <div class="col-4">
    <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>
  <div class="col-8">
    <div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-smooth-scroll="true" 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>
  </div>
</div>

Simpul ankɔ dɛn

Scrollspy nɔ jɔs de fɔ nav kɔmpɔnɛnt ɛn list grup dɛn, so i go wok pan ɛni <a>ankɔ ɛlimɛnt na di dɔkyumɛnt we de naw. Skrol di eria ɛn wach di chenj we di .activeklas de chenj.

Aytem 1 we de sho aw fɔ du dat Aytem 2 we de sho aw fɔ du dat Aytem 3 we de sho aw fɔ du dat Aytem 4 we de sho aw fɔ du dat Aytem 5 we de sho aw fɔ du dat

Aytem 1 we de sho aw fɔ du dat

Aytem 2 we de sho aw fɔ du dat

Aytem 3 we de sho aw fɔ du dat

Aytem 4 we de sho aw fɔ du dat

Aytem 5 we de sho aw fɔ du dat

<div class="row">
  <div class="col-4">
    <div id="simple-list-example" class="d-flex flex-column gap-2 simple-list-example-scrollspy text-center">
      <a class="p-1 rounded" href="#simple-list-item-1">Item 1</a>
      <a class="p-1 rounded" href="#simple-list-item-2">Item 2</a>
      <a class="p-1 rounded" href="#simple-list-item-3">Item 3</a>
      <a class="p-1 rounded" href="#simple-list-item-4">Item 4</a>
      <a class="p-1 rounded" href="#simple-list-item-5">Item 5</a>
    </div>
  </div>
  <div class="col-8">
    <div data-bs-spy="scroll" data-bs-target="#simple-list-example" data-bs-offset="0" data-bs-smooth-scroll="true" class="scrollspy-example" tabindex="0">
      <h4 id="simple-list-item-1">Item 1</h4>
      <p>...</p>
      <h4 id="simple-list-item-2">Item 2</h4>
      <p>...</p>
      <h4 id="simple-list-item-3">Item 3</h4>
      <p>...</p>
      <h4 id="simple-list-item-4">Item 4</h4>
      <p>...</p>
      <h4 id="simple-list-item-5">Item 5</h4>
      <p>...</p>
    </div>
  </div>
</div>

Elemɛnt dɛn we nɔ de si

Target elements we nɔ de si go ignore ɛn dɛn kɔrɛspɔndɛns nav aytem dɛn nɔ go gɛt .activeklas. Skrolspi instans dɛn we dɛn dɔn initialize insay wan nɔ-visible wrap go ignore ɔl di target ɛlimɛnt dɛn. Yuz di refreshwe fɔ chɛk fɔ di tin dɛn we yu kin si wans di wrap dɔn kam fɔ si.

document.querySelectorAll('#nav-tab>[data-bs-toggle="tab"]').forEach(el => {
  el.addEventListener('shown.bs.tab', () => {
    const target = el.getAttribute('data-bs-target')
    const scrollElem = document.querySelector(`${target} [data-bs-spy="scroll"]`)
    bootstrap.ScrollSpy.getOrCreateInstance(scrollElem).refresh()
  })
})

Aw fɔ yuz am

Via data atribyut dɛn

Fɔ mek i izi fɔ ad skrolspi bihayvya to yu tɔpba nevigishɔn, ad data-bs-spy="scroll"to di ɛlimɛnt we yu want fɔ spay pan (mɔs tipikli dis go bi di <body>). Dɔn ad di data-bs-targetatribyut wit di idɔ klas nem fɔ di mama ɛn papa ɛlimɛnt fɔ ɛni Bootstrap .navkɔmpɔnɛnt.

<body data-bs-spy="scroll" data-bs-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

Yu kin yuz JavaSkript fɔ yuz am

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

Di tin dɛn we yu kin pik fɔ du

As opshɔn dɛn kin pas bay data atribyut ɔ JavaSkript, yu kin ad opshɔn nem to data-bs-, lɛk insay data-bs-animation="{value}". Mek shɔ se yu chenj di kes tayp fɔ di opshɔn nem frɔm “ camelCase ” to “ kebab-case ” we yu de pas di opshɔn dɛn tru data atribyut dɛn. Fɔ ɛgzampul, yuz data-bs-custom-class="beautifier"insted ɔfdata-bs-customClass="beautifier" .

As fɔ Bootstrap 5.2.0, ɔl di kɔmpɔnɛnt dɛn de sɔpɔt wan ɛkspirimɛnt rizɔv data atribyut data-bs-configwe kin os simpul kɔmpɔnɛnt kɔnfigyushɔn as JSON string. We wan ɛlimɛnt gɛt data-bs-config='{"delay":0, "title":123}'ɛn data-bs-title="456"atribyut, di fayn titlevalyu go bi 456ɛn di sɛpret data atribyut dɛn go ɔvalayz valyu dɛn we dɛn gi pan data-bs-config. Apat frɔm dat, di data atribyut dɛn we de naw ebul fɔ gɛt JSON valyu dɛn lɛk data-bs-delay='{"show":0,"hide":150}'.

Nem	Kayn	Balans	Tɔk bɔt
`rootMargin`	rop	`0px 0px -25%`	Intasekshɔn Obsava rutMargin valid yunit dɛn, we dɛn de kɔlkul skrol pozishɔn.
`smoothScroll`	boolean we dɛn kɔl	`false`	I de mek pɔsin ebul fɔ skrol fayn fayn wan we pɔsin we de yuz am klik pan wan link we de tɔk bɔt di tin dɛn we dɛn kin si na SkrolSpy.
`target`	string, DOM ɛlimɛnt	`null`	Spesifiket elemɛnt fɔ aplay Scrollspy plɔgin.
`threshold`	arenjmɛnt fɔ di wan dɛn we de	`[0.1, 0.5, 1]`	`IntersectionObserver` threshold valid input, we yu de kɔlkul skrol pozishɔn.

Di Opshɔn dɛn we Nɔ De Prɛkt

Up until v5.1.3 wi bin de yuz offset& methodopshon, we naw deprecated en riples by rootMargin. Fɔ kip bakwɔd kɔmpitibliti, wi go kɔntinyu fɔ pars wan givɛn offsetto rootMargin, bɔt dis ficha go kɔmɔt na v6 .

Di we aw dɛn de du am

We	Tɔk bɔt
`dispose`	Destroy wan element in skrol spy. (I de pul di data we dɛn dɔn kip na di DOM ɛlimɛnt)
`getInstance`	Statik we fɔ gɛt di skrol instans we gɛt fɔ du wit wan DOM ɛlimɛnt.
`getOrCreateInstance`	Statik we fɔ gɛt di skrolspi instans we gɛt fɔ du wit wan DOM ɛlimɛnt, ɔ fɔ mek wan nyu wan if i nɔ bin initialize.
`refresh`	We yu de ad ɔ pul di ɛlimɛnt dɛn na di DOM, yu go nid fɔ kɔl di rifresh we.

Na dis na wan ɛgzampul we de yuz di we aw dɛn de rifresh:

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

Di tin dɛn we kin apin

Program	Tɔk bɔt
`activate.bs.scrollspy`	Dis ivent de faya pan di skrol ɛlimɛnt ɛnitɛm we di skrol spy aktiv wan ankɔ.

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

Skrol dɛn we de na di skrol

Aw i de wok

Ɛgzampul dɛn

Navbar fɔ di wan dɛn we de

Fɔs ɛd

Sɛkɔn ɛd

Tɔd ɛd

Di nɔmba 4 edlayn

Di nɔmba fayv edlayn

Nav we dɛn dɔn nest

Aytem 1 we de sho aw fɔ du dat

Aytem 1-1 we de sho aw fɔ du dis

Aytem 1-2 we de sho aw fɔ du dis

Aytem 2 we de sho aw fɔ du dat

Aytem 3 we de sho aw fɔ du dat

Aytem 3-1 fɔ di Baybul

Aytem 3-2 we de sho aw fɔ du dis

Lista di grup

Aytem 1 we de sho aw fɔ du dat

Aytem 2 we de sho aw fɔ du dat

Aytem 3 we de sho aw fɔ du dat

Aytem 4 we de sho aw fɔ du dat

Simpul ankɔ dɛn

Aytem 1 we de sho aw fɔ du dat

Aytem 2 we de sho aw fɔ du dat

Aytem 3 we de sho aw fɔ du dat

Aytem 4 we de sho aw fɔ du dat

Aytem 5 we de sho aw fɔ du dat

Elemɛnt dɛn we nɔ de si

Aw fɔ yuz am

Via data atribyut dɛn

Yu kin yuz JavaSkript fɔ yuz am

Di tin dɛn we yu kin pik fɔ du

Di we aw dɛn de du am

Di tin dɛn we kin apin