Scrollspy

Na-emelite igodo Bootstrap na-akpaghị aka ma ọ bụ depụta ihe mejupụtara otu dabere na ọnọdụ mpịakọta iji gosi njikọ dị ugbu a na ebe nlele.

Na ibe a

Ka o si arụ ọrụ

Scrollspy na-atụgharị .activeklaasị na arịlịka ( <a>) ọcha mgbe a na-atụgharị ihe ndị nwere idihe arịlịka na href-ezo aka na ya. A na-eji Scrollspy nke ọma na njikọ Bootstrap nav akụrụngwa ma ọ bụ ndepụta otu , mana ọ ga-arụkwa ọrụ na ihe ọ bụla arịlịka na ibe dị ugbu a. Nke a bụ ka ọ na-arụ ọrụ.

Iji malite, scrollspy chọrọ ihe abụọ: igodo ụzọ, otu ndepụta, ma ọ bụ njikọ njikọ dị mfe, gbakwunyere akpa akwụkwọ mpịakọta. Akpa a na-emegharị emegharị nwere ike ịbụ ihe <body>ma ọ bụ ihe eji eme ihe nwere nhazi heightna overflow-y: scroll.
N'elu akpa a na-atụgharịgharị, gbakwunye data-bs-spy="scroll"na data-bs-target="#navId"ebe navIdọ bụ ihe pụrụ iche idnke igodo ejikọrọ. Jide n'aka na ị tinyekwara a tabindex="0"iji hụ na ịnweta ahụigodo.
Ka ị na-atụgharị akpa "nledo", a .activena-agbakwunye otu klas ma wepụ ya na njikọ arịlịka dị n'ime igodo ejikọtara. Njikọ ga-enwerịrị idebumnuche enwere ike idozi, ma ọ bụghị ya, a na-eleghara ya anya. Dịka ọmụmaatụ, a <a href="#home">home</a>ga-ederịrị ihe n'ụdị DOM<div id="home"></div>
A ga-eleghara ihe ebumnobi na-adịghị ahụ anya. Lee ngalaba ihe anaghị ahụ anya n'okpuru.

Ihe atụ

Pịgharịa mpaghara n'okpuru ebe ịnya ụgbọ mmiri wee lelee klaasị na-agbanwe agbanwe. Mepee menu ndọpụta wee lelee ka a na-akọwapụtakwa ihe ndọpụta ahụ.

Isi mmalite

Nke a bụ ụfọdụ ọdịnaya edebe maka scrollspy ibe. Rịba ama na ka ị na-atụgharị na ibe ahụ, a na-eme ka njikọ igodo kwesịrị ekwesị pụta ìhè. A na-emeghachi ya n'ime ihe atụ akụrụngwa. Anyị na-agbakwunye otu ihe atụ ọzọ ebe a iji mesie mpịakọta ike na ime ka ọ pụta ìhè.

Isi nke abụọ

Isi nke atọ

Isi nke anọ

Isi nke ise

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

Akwukwo nso

Scrollspy na-arụkwa ọrụ na akwu .navs. .navỌ bụrụ na akwụrụ .active, ndị mụrụ ya ga-abụkwa .active. Pịgharịa n'akụkụ navbar wee lelee klaasị na-agbanwe agbanwe.