Scrollspy

Fa'afou otometi le Bootstrap navigation po'o le lisi o vaega vaega e fa'atatau i le tulaga ta'ai e fa'ailoa ai po'o fea so'otaga o lo'o galue i le va'aiga.

I luga o lenei itulau

E faapefea ona galue

Scrollspy e sui le .activevasega i luga o le taula ( <a>) elemene pe a o'o mai le elemene o idlo'o fa'asino i ai le taula href. Scrollspy e sili ona faʻaoga faʻatasi ma se vaega Bootstrap nav poʻo le lisi kulupu , ae o le a aoga foi ma soʻo se elemene taula i le itulau o loʻo i ai nei. O le auala lea e aoga ai.

Ina ia amata, scrollspy e manaʻomia ni mea se lua: o se faʻataʻitaʻiga, lisi vaega, poʻo se seti faigofie o fesoʻotaʻiga, faʻatasi ai ma se atigipusa e mafai ona taʻavale. O le atigipusa ta'ai e mafai ona avea ma <body>elemene masani ma se seti heightma overflow-y: scroll.
I luga o le koneteina e mafai ona ta'ai, fa'aopoopo data-bs-spy="scroll"ma o data-bs-target="#navId"fea navIde tulaga ese idai le fa'atautaiga fa'atasi. Ia mautinoa ia aofia ai foi se tabindex="0"e mautinoa ai le avanoa o le keyboard.
A'o e ta'ai le koneteina "mata'i", .activee fa'aopoopoina se vasega ma 'ave'esea mai feso'ota'iga taula i totonu o le fa'asinomaga fa'atasi. O feso'ota'iga e tatau ona i ai ni fa'amoemoe e mafai ona fo'ia id, a leai e le amana'ia. Mo se faʻataʻitaʻiga, e <a href="#home">home</a>tatau ona fetaui ma se mea i le DOM pei<div id="home"></div>
O elemene autu e le o vaaia o le a le amanaiaina. Va'ai le vaega e le o va'aia elemene i lalo.

Faataitaiga

Fa'asolo le vaega i lalo o le navbar ma matamata le suiga o le vasega. Tatala le lisi pa'u i lalo ma matamata i mea e pa'u i lalo o lo'o fa'amamafaina fo'i.

Uluai ulutala

O nisi nei o mea e tu'u ai avanoa mo le itulau scrollspy. Manatua a e fa'asolo i lalo le itulau, o lo'o fa'ailoaina le so'otaga fa'atautaiga talafeagai. E toe fai i le fa'ata'ita'iga vaega. Matou te faʻaopoopoina nisi faʻataʻitaʻiga kopi iinei e faʻamamafa ai le taʻavale ma faʻailoga.

Ulutala lona lua

Ulutala lona tolu

Ulutala lona fa

Ulutala lona lima

<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

E galue fo'i Scrollspy i fa'aputuga .navs. Afai o se faamoega , .nave .activefaapena foi ona matua .active. Fa'asolo le vaega i tafatafa o le navbar ma matamata le suiga o le vasega.