Scrollspy

Ntlafatsa ka boiketsetso ho tsamaea ha Bootstrap kapa lethathamo la likarolo tsa sehlopha ho ipapisitse le boemo ba moqolo ho bontša hore na ke sehokelo sefe se sebetsang hona joale boema-kepe.

Leqepheng lena

Kamoo e sebetsang kateng

Scrollspy e totobatsa .activesehlopha linthong tsa ankora ( <a>) ha elemente e nang le idtšupiso ea ankora hrefe shejoa hore e shebelle. Scrollspy e sebelisoa hamolemo ka ho fetisisa hammoho le karolo ea Bootstrap nav kapa sehlopha sa lenane , empa hape e tla sebetsa le likarolo leha e le life tsa ankora leqepheng la hona joale. Mona ke kamoo e sebetsang kateng.

Ho qala, scrollspy e hloka lintho tse peli: ho tsamaea, sehlopha sa lenane, kapa sete e bonolo ea likhokahano, hammoho le setshelo se phuthollang. Sets'oants'o se phutholohang e ka ba ntho <body>kapa ntho e tloaelehileng e nang le sete heightle overflow-y: scroll.
Ka har'a sets'oants'o sa ho phutholla, eketsa data-bs-spy="scroll"le data-bs-target="#navId"hore navIdna mofuta o ikhethileng ido hokae. Etsa bonnete ba hore o kenyelletsa a tabindex="0"ho netefatsa phihlello ea keyboard.
Ha u ntse u tsamaisa sets'oants'o sa "spied", .activesehlopha sea eketsoa le ho tlosoa ho lihokelo tsa ankora ka har'a mokhoa o amanang le ona. Lihokelo li tlameha ho ba le lipehelo tse rarollehang id, ho seng joalo li tla hlokomolohuoa. Ka mohlala, e <a href="#home">home</a>tlameha ho lumellana le ntho e itseng e DOM e kang<div id="home"></div>
Lintlha tse reriloeng tse sa bonahaleng li tla hlokomolohuoa. Sheba karolo ea Lintho tse sa bonahaleng ka tlase.

Mehlala

Tsamaisetsa sebaka se ka tlase ho navbar 'me u shebelle phetoho ea sehlopha se sebetsang. Bula menu e theoha 'me u shebelle lintho tse theohang li totobatsoa hape.

Sehlooho sa pele

Tsena ke litaba tsa setšoantšisi bakeng sa leqephe la scrollspy. Hlokomela hore ha u ntse u theosa leqephe, sehokelo se loketseng sa ho sesa sea totobatsoa. E phetoa ho pholletsa le mohlala oa karolo. Re lula re eketsa kopi ea mohlala mona ho totobatsa ho phenya le ho totobatsa.

Sehlooho sa bobeli

Sehlooho sa boraro

Sehlooho sa bone

Sehlooho sa bohlano

<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 e boetse e sebetsa le sehlaha sa .navs. Haeba sehlaha .navse le teng .active, batsoali ba sona le bona ba tla .active. Tsamaisetsa sebaka se haufi le navbar 'me u shebelle phetoho ea sehlopha se sebetsang.