Nwoma mmobɔwee

Yɛ Bootstrap navigation anaa list group components a egyina scroll gyinabea so no foforo ankasa de kyerɛ link a ɛreyɛ adwuma mprempren wɔ viewport no mu.

Wɔ kratafa yi so

Sɛnea ɛyɛ adwuma

Scrollspy wɔ ahwehwɛde kakraa bi na ama ayɛ adwuma yiye:

Ɛsɛ sɛ wɔde di dwuma wɔ Bootstrap nav component anaa list group so .
Scrollspy hwehwɛ position: relative;wɔ element a woreyɛ akwansra so no so, mpɛn pii no <body>.
Ankora ( <a>) ho hia na ɛsɛ sɛ ɛkyerɛ element bi a ɛwɔ saa id.

Sɛ wɔde di dwuma yiye a, wo nav anaa list kuw no bɛsesa sɛnea ɛfata, de .activeadesuakuw no afi ade biako so akɔ foforo so a egyina wɔn botae ahorow a ɛbata ho so.

Nneɛma a wɔde hyɛ mu ne keyboard a wɔde hyɛ mu

Sɛ woreyɛ ade a wotumi twetwe (a ɛnyɛ <body>) a, hwɛ hu sɛ wowɔ heightset na wode adi overflow-y: scroll;dwuma wɔ so—a ɛka a ho tabindex="0"na ama woahwɛ ahu sɛ wobɛkɔ keyboard so.

Twe beae a ɛwɔ navbar no ase no na hwɛ adesuakuw a ɛreyɛ adwuma no nsakrae. Wɔbɛtwe adwene asi nneɛma a ɛwɔ ase hɔ no so nso.

Asɛmti a edi kan

Eyi yɛ beae bi a ɛwɔ nsɛm a ɛwɔ scrollspy krataafa no mu. Hyɛ no nsow sɛ bere a worekɔ kratafa no ase no, wobɛtwe adwene asi navigation link a ɛfata no so. Wɔasan ayɛ no bio wɔ component nhwɛso no nyinaa mu. Yɛkɔ so de nhwɛso bi foforo bi ka ho wɔ ha de si nhoma mmobɔwee ne nea wɔasi so dua no so dua.

Asɛmti a ɛto so abien

Asɛmti a ɛto so abiɛsa

Asɛmti a ɛto so anan

Asɛmti a ɛto so anum

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

Nhwɛso a ɛne nested nav

Scrollspy nso ne nested .navs yɛ adwuma. Sɛ nested bi .navyɛ a .active, n'awofo nso bɛyɛ .active. Twe beae a ɛwɔ navbar no nkyɛn no na hwɛ adesuakuw a ɛreyɛ adwuma no nsakrae.

Adeɛ 1

Asɛm 1-1

Asɛm 1-2

Adeɛ 2

Adeɛ 3

Asɛm 3-1

Asɛm 3-2

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

Nhwɛso a ɛne list-group

Scrollspy nso de .list-groups yɛ adwuma. Twe beae a ɛwɔ list kuw no nkyɛn no na hwɛ adesuakuw a ɛreyɛ adwuma no nsakrae.

Adeɛ 1 Adeɛ 2 Adeɛ 3 Adeɛ 4

Adeɛ 1

Adeɛ 2

Adeɛ 3

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

Sɛnea wɔde di dwuma

Via data su ahorow so

Sɛnea ɛbɛyɛ a ɛbɛyɛ mmerɛw sɛ wode scrollspy suban bɛka wo topbar navigation no ho a, fa ka data-bs-spy="scroll"element a wopɛ sɛ wohwɛ so no ho (mpɛn pii no eyi bɛyɛ <body>). Afei fa data-bs-targetattribute no ka ID anaa class a ɛwɔ ɔwofo element a ɛwɔ Bootstrap .navcomponent biara mu no ho.

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>

Ɛdenam JavaScript so

Sɛ wode position: relative;wo CSS no ka ho wie a, frɛ scrollspy no fa JavaScript so:

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

ID botae ahorow a wobetumi asiesie a ɛho hia

Ɛsɛ sɛ Navbar link ahorow no nya id botae ahorow a wobetumi asiesie. Sɛ nhwɛso no, <a href="#home">home</a>ɛsɛ sɛ a ne biribi a ɛwɔ DOM no mu te sɛ <div id="home"></div>.

Wɔabu ani agu nneɛma a wɔde asi wɔn ani so a ɛnyɛ nea wotumi hu so

Wɔbɛbu wɔn ani agu target elements a ɛnhunu so na wɔrensi wɔn nav nneɛma a ɛne no hyia no so dua da.

Akwan a wɔfa so yɛ

ma ahoɔden

Sɛ wode scrollspy di dwuma de ka nneɛma a wode bɛka ho anaa woayi afi DOM no mu ho a, ɛho behia sɛ wofrɛ refresh kwan no te sɛ saa:

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

tow gu

Ɔsɛe element bi scrollspy. (Eyi data a wɔde asie wɔ DOM element no so)

nyaNhwɛsode

Static kwan a ɛma wo kwan ma wo nya scrollspy nhwɛso a ɛbata DOM element bi ho

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

nyaAnaasɛKyɛNhwɛso

Static kwan a ɛma wo kwan ma wo nya scrollspy nhwɛsoɔ a ɛbata DOM element bi ho, anaasɛ wobɔ foforɔ sɛ ɛba sɛ wɔanhyɛ aseɛ a

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

Nneɛma a wubetumi apaw

Wobetumi afa data attributes anaa JavaScript so de nneɛma a wobɛpaw no akɔ. Sɛ wopɛ data su ahorow a, fa option din no ka ho data-bs-, sɛnea ɛwɔ data-bs-offset="".

Din	Korɔ	Mfiaseɛ	Nkyerɛmu
`offset`	nɔma	`10`	Pixels to offset fi soro bere a worebu gyinabea a scroll no.
`method`	ahoma	`auto`	Finds which section the spied element is in. `auto`bɛpaw ɔkwan a eye sen biara a wobɛfa so anya scroll coordinates. `offset`de ɔkwan no bedi dwuma `Element.getBoundingClientRect()`de anya scroll coordinates. `position`de `HTMLElement.offsetTop`ne `HTMLElement.offsetLeft`properties no bedi dwuma de anya scroll coordinates.
`target`	ahama \| jAsɛmmisa adeɛ \| DOM element a ɛwɔ hɔ		Kyerɛ element a wode bedi dwuma Scrollspy plugin.

Nsɛm a esisi

Adeyɛ no su	Nkyerɛmu
`activate.bs.scrollspy`	Saa adeyɛ yi tow wɔ nhoma mmobɔwee element no so bere biara a ade foforo bi bɛyɛ adwuma denam nhoma mmobɔwee no so.

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

Nwoma mmobɔwee

Sɛnea ɛyɛ adwuma

Nneɛma a wɔde hyɛ mu ne keyboard a wɔde hyɛ mu

Nhwɛso wɔ navbar mu

Asɛmti a edi kan

Asɛmti a ɛto so abien

Asɛmti a ɛto so abiɛsa

Asɛmti a ɛto so anan

Asɛmti a ɛto so anum

Nhwɛso a ɛne nested nav

Adeɛ 1

Asɛm 1-1

Asɛm 1-2

Adeɛ 2

Adeɛ 3

Asɛm 3-1

Asɛm 3-2

Nhwɛso a ɛne list-group

Adeɛ 1

Adeɛ 2

Adeɛ 3

Adeɛ 4

Sɛnea wɔde di dwuma

Via data su ahorow so

Ɛdenam JavaScript so

ID botae ahorow a wobetumi asiesie a ɛho hia

Wɔabu ani agu nneɛma a wɔde asi wɔn ani so a ɛnyɛ nea wotumi hu so

Akwan a wɔfa so yɛ

ma ahoɔden

tow gu

nyaNhwɛsode

nyaAnaasɛKyɛNhwɛso

Nneɛma a wubetumi apaw

Nsɛm a esisi