Scrollspy

Hoʻohou ʻakomi i ka hoʻokele Bootstrap a i ʻole ka papa inoa o nā ʻāpana hui e pili ana i ke kūlana ʻōwili e hōʻike i ka loulou e hana nei i kēia manawa ma ka viewport.

Ma kēia ʻaoʻao

Pehea e hana ai

Hoʻololi ʻo Scrollspy i ka .activepapa ma nā mea heleuma ( <a>) i ka wā e ʻōwili ʻia ai ka mea me ka mea i idkuhikuhi ʻia e ka heleuma href. Hoʻohana maikaʻi ʻia ʻo Scrollspy me kahi ʻāpana Bootstrap nav a i ʻole pūʻulu papa inoa , akā e hana pū me nā mea heleuma ma ka ʻaoʻao o kēia manawa. Penei ka hana ana.

No ka hoʻomaka ʻana, koi ʻia ʻo scrollspy i ʻelua mau mea: kahi hoʻokele, pūʻulu papa inoa, a i ʻole kahi hoʻonohonoho maʻalahi o nā loulou, me kahi pahu scrollable. Hiki i ka ipu scrollable ke ʻano a i <body>ʻole kahi mea maʻamau me kahi set heighta me overflow-y: scroll.
Ma ka pahu scrollable, hoʻohui data-bs-spy="scroll"a data-bs-target="#navId"ma hea navIdkahi kū hoʻokahi ido ka hoʻokele pili. E hoʻokomo pū i kahi tabindex="0"e hōʻoia i ke komo ʻana i ka papa keyboard.
Ke ʻōwili nei ʻoe i ka ipu "spied", .activehoʻohui ʻia kahi papa mai nā loulou heleuma i loko o ka hoʻokele pili. Pono nā loulou e hoʻoholo idi nā pahuhopu, i ʻole e nānā ʻole ʻia lākou. No ka laʻana, <a href="#home">home</a>pono e pili i kekahi mea ma ka DOM like<div id="home"></div>
E nānā ʻole ʻia nā mea i ʻike ʻole ʻia. E ʻike i ka ʻāpana ʻAʻole i ʻike ʻia ma lalo nei.

Nā laʻana

E ʻōwili i ka ʻāpana ma lalo o ka navbar a nānā i ka loli o ka papa hana. E wehe i ka papa kuhikuhi a nānā i nā mea hāʻule i hōʻike pū ʻia.

Poʻomanaʻo mua

ʻO kēia kekahi maʻiʻo placeholder no ka ʻaoʻao scrollspy. E hoʻomanaʻo i ka wā e kaomi ai ʻoe i lalo o ka ʻaoʻao, ua hōʻike ʻia ka loulou hoʻokele kūpono. Hoʻopuka hou ʻia i loko o ka laʻana ʻāpana. Hoʻohui mākou i kekahi kope kope hou aʻe ma ʻaneʻi e hoʻoikaika i ka ʻōwili ʻana a me ka hōʻailona.

Poʻomanaʻo ʻelua

Poʻomanaʻo ʻekolu

Poʻomanaʻo ʻehā

Poʻomanaʻo ʻelima

<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

Hana pū ʻo Scrollspy me nā nested .navs. Inā he pūnana .nav, ʻo .activekona mau mākua pū kekahi .active. E ʻōwili i ka ʻāpana ma ka ʻaoʻao o ka navbar a nānā i ka hoʻololi ʻana o ka papa hana.