Tɛmɛn ka taa kunnafoni kunbabaw la Tɛmɛn ka taa docs navigation kan
in English

Scrollspy ye

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

Nin ɲɛ in kan

A bɛ baara kɛ cogo min na

Scrollspy bɛ ni wajibi damadɔw ye walasa ka baara kɛ ka ɲɛ:

  • a ka kan ka baara kɛ Bootstrap nav yɔrɔ dɔ kan walima lisi kulu dɔ kan .
  • Scrollspy bɛ ɲini position: relative;fɛn min kan i bɛ ka sɛgɛsɛgɛli kɛ, a ka c’a la, o ye <body>.
  • Ankɔri ( <a>) wajibiyalen don wa u ka kan ka fɛn dɔ jira ni o ye id.

Ni a waleyara ka ɲɛ, i ka nav walima list kulu bɛna kuraya ka kɛɲɛ n’o ye, ka .activekalasi bɔ fɛn dɔ la ka taa fɛn wɛrɛ la ka da u ni ɲɔgɔn cɛ laɲiniw kan.

Minɛn minnu bɛ se ka wuli ani klaviyeti doncogo

N’i ​​bɛ minɛn dɔ dilan min bɛ se ka wuli (n’o tɛ <body>), i jija ka heightseti dɔ sɔrɔ ani overflow-y: scroll;ka a kɛ—a kɛrɛfɛ tabindex="0"walasa ka se ka klaviyeti sɔrɔ.

Misali la navbar kɔnɔ

I ka yɔrɔ lajɛ min bɛ navbar jukɔrɔ ani ka kalansen min bɛ baara kɛ, o fɛn caman Changement lajɛ. Fɛn minnu bɛ bɔ duguma, olu fana bɛna jira.

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

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 sabanan

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 naaninan

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 duurunan

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.

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

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

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.

Fɛn 1-1nan

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.

Fɛn 1-2nan

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.

Fɛn 2nan

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.

Fɛn 3nan

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.

Fɛn 3-1nan

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.

Fɛn 3-2nan

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.

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

Misali ni list-group ye

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

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.

Fɛn 2nan

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.

Fɛn 3nan

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.

Fɛn 4nan

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.

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

Baarakɛcogo

Ka tɛmɛn donanw ka fɛnw kan

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 a kan data-bs-targetni Bootstrap .navyɔrɔ o yɔrɔ bangebaga-yɔrɔ ID walima a kalasi ye.

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

I kɛlen kɔ ka fara position: relative;i ka CSS kan, i ka scrollspy wele JavaScript fɛ:

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

ID laɲiniw minnu bɛ se ka ɲɛnabɔ, olu wajibiyalen don

Navbar jɛgɛnw ka kan ka kɛ ni id laɲiniw ye minnu bɛ se ka ɲɛnabɔ. 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 ma jate

Laɲinifɛnw minnu tɛ ye, olu bɛna jate ani u nav fɛnw minnu bɛ bɛn o ma, olu tɛna jira abada.

Fɛɛrɛw

ka farikolo lafiya

Ni aw bɛ baara kɛ ni scrollspy ye ka fara fɛnw farali walima u bɔli kan DOM kɔnɔ, aw bɛna a ɲini ka refresh fɛɛrɛ wele i n’a fɔ:

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

ka a fili

A bɛ element dɔ ka scrollspy tiɲɛ. (A bɛ kunnafoni maralenw bɔ DOM element kan)

getInstance ye

Static method min b’a to i bɛ se ka scrollspy instance sɔrɔ min bɛ tali kɛ DOM element dɔ la

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

sɔrɔWala ka Instance Dabɔ

Static method min b’a To i bɛ se ka scrollspy instance sɔrɔ min bɛ tali Kɛ DOM element dɔ la, walima ka kura Dabɔ n’a sɔrɔla a ma Daminɛ

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

Sugandili minnu bɛ kɛ

Sugandili bɛ se ka tɛmɛ data attributes walima JavaScript fɛ. Donanw cogoyaw kama, aw bɛ sugandi tɔgɔ fara data-bs-, i n’a fɔ a bɛ cogo min na data-bs-offset="".

Tɔ̀gɔ Ka sɛbɛen masin na Fɔlɔ Cogojirali
offset nimɔrɔ 10 Pixels ka offset ka bɔ sanfɛ ni jatebɔ jɔyɔrɔ scroll.
method gaari auto A bɛ sɔrɔ yɔrɔ min na spyed element bɛ yɔrɔ min na.a autobɛna fɛɛrɛ ɲuman sugandi walasa ka scroll coordinates sɔrɔ. offsetbɛna baara kɛ ni Element.getBoundingClientRect()fɛɛrɛ ye walasa ka scroll coordinates sɔrɔ. positionbɛna baara kɛ ni HTMLElement.offsetTopani HTMLElement.offsetLeftproperties ye walasa ka scroll coordinates sɔrɔ.
target juru | jQuery fɛn | DOM yɔrɔ A bɛ fɛn dɔ jira min bɛna Scrollspy plugin waleya.

Ko minnu kɛra

Ko kɛlen suguya Cogojirali
activate.bs.scrollspy O ko in bɛ tasuma Bɔ sɛbɛnfura yɔrɔ la tuma o tuma ni fɛn kura dɔ Kɛra baara la sɛbɛnfura fɛ. 
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
  // do something...
})