Scrollspy ye

Bootstrap navigation walima list group components kuraya i yɛrɛma ka da scroll position kan walasa k’a jira ko link min bɛ baara la sisan viewport kɔnɔ.

Nin ɲɛ in kan

A bɛ baara kɛ cogo min na

Scrollspy bɛ .activekalasi wuli ka bɔ anchor ( <a>) fɛnw kan ni fɛn min bɛ ni idanchor's ka ɲɛfɔli ye, hrefo bɛ sɛgɛsɛgɛli kɛ ka don yecogo la. Scrollspy ka fisa ka baara kɛ ni Bootstrap nav component walima list group ye , nka a bɛna baara kɛ fana ni ankɔri fɛn o fɛn ye min bɛ ɲɛ sisan kan. A bɛ baara kɛ cogo min na, o filɛ nin ye.

Walasa k’a daminɛ, scrollspy bɛ fɛn fila de wajibiya: navigatiɔn, lisi kulu, walima jɛgɛnsira nɔgɔman dɔ, ka fara minɛn dɔ kan min bɛ se ka sɛgɛsɛgɛ. Minɛn min bɛ se ka sɛgɛsɛgɛ, o bɛ se ka kɛ <body>walima ka kɛ ladamufɛn ye ni seti ye heightani overflow-y: scroll.
Minɛn min bɛ se ka sɛgɛsɛgɛ, i ka fara o kan data-bs-spy="scroll"ani data-bs-target="#navId"yɔrɔ min na , o ye navigatiɔn min bɛ tali kɛ navIdo la, o ɲɔgɔn tɛ yen . idAw ye aw jija ka a fana don a kɔnɔ tabindex="0"walasa ka aw jija ka klaviyeti sɔrɔ.
Ni i bɛ “spied” minɛn lajɛ, .activekalasi dɔ bɛ fara a kan ani ka bɔ anchor links kɔnɔ navigation kɔnɔ min bɛ tali kɛ o la. Jɛɲɔgɔnya ka kan ka kɛ ni idlaɲiniw ye minnu bɛ se ka ɲɛnabɔ, n’o tɛ u tɛ jate. Misali la, a <a href="#home">home</a>ka kan ka bɛn fɛn dɔ ma DOM kɔnɔ i n’a fɔ<div id="home"></div>
Laɲinifɛn minnu tɛ ye, olu bɛna jate. Aw ye yɔrɔ lajɛ min tɔgɔ ye ko Non-visible elements .

Misaliw

Aw ye yɔrɔ lajɛ min bɛ navbar jukɔrɔ ani ka kalansen min bɛ baara kɛ, o yeli ye. Meniw da wuli ani ka fɛnw lajɛ minnu bɛ jira fana.

Kumakun fɔlɔ

Nin ye yɔrɔ-yɔrɔ-ko dɔw ye scrollspy ɲɛ kan. A kɔlɔsi ko n’i bɛ ɲɛ in lajɛ ka jigin, navigatiɔn yɔrɔ bɛnnen bɛ jira. A bɛ segin a kan component misali bɛɛ kɔnɔ. An bɛ to ka misali sɛbɛn dɔw fara a kan yan walasa ka sinsin sɛbɛnni ni ɲɛfɔli kan.

Kumakun filanan

Kumakun sabanan

Kumakun naaninan

Kumakun duurunan

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

Nested nav

Scrollspy fana bɛ baara Kɛ ni nested .navs ye. ni nested .navye .active, a bangebagaw fana bɛna kɛ .active. Yɔrɔ min bɛ navbar kɛrɛfɛ, i ka o lajɛ ani ka kalansen min bɛ baara kɛ, o fɛn caman Changement lajɛ.

Fɛn 1nan

Aw k’a to aw hakili la ko JavaScript plugin b’a ɲini ka fɛn ɲuman sugandi fɛn bɛɛ cɛma minnu bɛ se ka ye. Scrollspy laɲini caman ye minnu bɛ ye waati kelen na, olu bɛ se ka gɛlɛya dɔw lase mɔgɔ ma.

Fɛn 1-1nan

Fɛn 1-2nan

Fɛn 2nan

Fɛn 3nan

Fɛn 3-1nan

Fɛn 3-2nan

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

Lisiti kulu

Scrollspy fana bɛ baara kɛ ni .list-groups ye. Yɔrɔ min bɛ lisi kulu kɛrɛfɛ, i ka o yɔrɔ lajɛ ani ka kalansen caman yeli lajɛ min bɛ baara la.

Fɛn 1nan Fɛn 2nan Fɛn 3nan Fɛn 4nan

Fɛn 1nan

Fɛn 2nan

Fɛn 3nan

Fɛn 4nan

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

Ankɔri nɔgɔmanw

Scrollspy tɛ dan nav yɔrɔw ni list kuluw dɔrɔn ma, o la a bɛna baara kɛ <a>ankɔri fɛn o fɛn kan sɛbɛn kɔnɔ min bɛ sen na sisan. Yɔrɔ lajɛ ani ka .activekalansen caman yeli lajɛ.

Fɛn 1nan Fɛn 2nan Fɛn 3nan Fɛn 4nan Fɛn 5nan

Fɛn 1nan

Fɛn 2nan

Fɛn 3nan

Fɛn 4nan

Fɛn 5nan

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

Fɛn minnu tɛ ye

Laɲini fɛn minnu tɛ ye, olu bɛna jate ani u ka nav fɛn minnu bɛ bɛn o ma, olu tɛna .activekalasi sɔrɔ. Scrollspy instances minnu daminɛna ni wrapper yebali ye, olu bɛna laɲinifɛnw bɛɛ jateminɛn. Aw bɛ baara kɛ ni refreshfɛɛrɛ ye walasa ka fɛnw lajɛ minnu bɛ se ka kɔlɔsi ni finimugu kɛra fɛn ye min bɛ ye.

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

Baarakɛcogo

Donanw ka fɛnɲɛnɛmaw fɛ

Walasa ka scrollspy kɛcogo fara nɔgɔya la i ka topbar navigation kan, data-bs-spy="scroll"i b’a fɛ ka spy min kɛ, i ka fara o kan (a ka c’a la nin bɛna kɛ <body>). O kɔ fɛ, i bɛ fɛn in Fàra o data-bs-targetkan ni idBootstrap yɔrɔ o yɔrɔ bangebaga-yɔrɔ tɔgɔ ye walima kàlasi tɔgɔ ye .nav.

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

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

Sugandili minnu bɛ kɛ

I n’a fɔ sugandiliw bɛ se ka tɛmɛ data attributes walima JavaScript fɛ, i bɛ se ka sugandi tɔgɔ dɔ fara data-bs-, i n’a fɔ a bɛ cogo min na data-bs-animation="{value}". Aw ye aw jija ka sugandili tɔgɔ ka case suguya Changer ka bɔ “ camelCase ” la ka kɛ “ kebab-case ” ye ni aw bɛ sugandiliw tɛmɛ data attributes fɛ. Misali la, baara kɛ data-bs-custom-class="beautifier"ni data-bs-customClass="beautifier".

Kabini Bootstrap 5.2.0, yɔrɔw bɛɛ bɛ dɛmɛ don kunnafoni- falen-falen-yɔrɔ-ko -kɛcogodata-bs-config dɔ la min bɛ se ka yɔrɔw labɛncogo nɔgɔmanw bila i n’a fɔ JSON sɛrɛ. Ni fɛn dɔ bɛ data-bs-config='{"delay":0, "title":123}'ni ni data-bs-title="456"fɛnw ye, nafa laban titlebɛna kɛ 456ani kunnafoni danfaralenw bɛna nafaw wuli minnu dira data-bs-config. O tɛmɛnen 'kɔ, kunnafoni-falen-falen-minɛn minnu bɛ yen olu bɛ Se ka JSON nafaw Ladon i n'a fɔ data-bs-delay='{"show":0,"hide":150}'.

Tɔ̀gɔ	Ka sɛbɛen masin na	Fɔlɔ	Cogojirali
`rootMargin`	gaari	`0px 0px -25%`	Intersection Observer rootMargin unité valides, ni jatebɔ bɛ scroll jɔyɔrɔ kan.
`smoothScroll`	boolean ye	`false`	A bɛ se ka sɛgɛsɛgɛli kɛ ni baarakɛla dɔ ye jɛgɛnsira dɔ digi min bɛ ScrollSpy kɔlɔsilifɛnw kofɔ.
`target`	sɛrɛ, DOM yɔrɔ	`null`	A bɛ fɛn dɔ jira min bɛna Scrollspy plugin waleya.
`threshold`	array (ɲɛnajɛ).	`[0.1, 0.5, 1]`	`IntersectionObserver` threshold valid input, ni jatebɔ kɛra scroll jɔyɔrɔ kan.

Sugandili minnu ma kɛ fɔlɔ

Fɔ ka na se v5.1.3 ma an tun bɛ baara kɛ ni offset& methodoptions ye, minnu ma baara kɛ sisan ka bila u nɔ na ni rootMargin. Walasa ka kɔfɛ-baarakɛɲɔgɔnya To, an bɛna t’a fɛ ka dilen dɔ parse offset, rootMarginnka o fɛn in bɛna Bɔ v6 kɔnɔ.

Fɛɛrɛw

Kɛcogo	Cogojirali
`dispose`	A bɛ element dɔ ka scrollspy tiɲɛ. (A bɛ kunnafoni maralenw bɔ DOM element kan)
`getInstance`	Static method ka scrollspy instance sɔrɔ min bɛ tali kɛ DOM element dɔ la.
`getOrCreateInstance`	Static method ka scrollspy instance sɔrɔ min bɛ tali kɛ DOM element dɔ la, walima ka kura da ni a ma daminɛ.
`refresh`	Ni aw bɛ fɛnw fara ɲɔgɔn kan walima ka bɔ DOM kɔnɔ, aw bɛna a ɲini ka refresh fɛɛrɛ wele.

Nin ye misali ye min bɛ baara kɛ ni refresh fɛɛrɛ ye:

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

Ko minnu kɛra

Lajɛrɛ	Cogojirali
`activate.bs.scrollspy`	O ko in bɛ tasuma Bɔ sɛbɛnfura yɔrɔ la tuma o tuma ni ankɔri dɔ bɛ baara Kɛ sɛbɛnfurakɛlan fɛ.

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

Scrollspy ye

A bɛ baara kɛ cogo min na

Misaliw

Navbar ye

Kumakun fɔlɔ

Kumakun filanan

Kumakun sabanan

Kumakun naaninan

Kumakun duurunan

Nested nav

Fɛn 1nan

Fɛn 1-1nan

Fɛn 1-2nan

Fɛn 2nan

Fɛn 3nan

Fɛn 3-1nan

Fɛn 3-2nan

Lisiti kulu

Fɛn 1nan

Fɛn 2nan

Fɛn 3nan

Fɛn 4nan

Ankɔri nɔgɔmanw

Fɛn 1nan

Fɛn 2nan

Fɛn 3nan

Fɛn 4nan

Fɛn 5nan

Fɛn minnu tɛ ye

Baarakɛcogo

Donanw ka fɛnɲɛnɛmaw fɛ

JavaScript fɛ

Sugandili minnu bɛ kɛ

Fɛɛrɛw

Ko minnu kɛra