Scrollspy

Navîgasyona Bootstrap-ê bixweber nûve bikin an jî pêkhateyên komê li gorî pozîsyona gerokê navnîş bikin da ku destnîşan bikin ka kîjan girêdan niha di dîmenderê de çalak e.

Li ser vê rûpelê

Çawa dixebite

Scrollspy .activeçîna li ser <a>hêmanên ankerê ( ) diguherîne dema ku hêmana ku idji hêla lengerê ve hatî referanskirin li hrefber çavan tê gerandin. Scrollspy çêtirîn bi pêwendiyek bi hêmanek navokê ya Bootstrap an koma navnîşê re tê bikar anîn , lê ew ê di rûpela heyî de bi her hêmanên ankerê re jî bixebite . Li vir çawa dixebite.

Ji bo destpêkirinê, scrollspy du tiştan hewce dike: navîgasyon, komek navnîş, an komek hêsan a lînkan, plus konteynirek gerok. Konteynirê scrollable dikare bibe <body>an hêmanek xwerû ya bi set heightû overflow-y: scroll.
Li ser konteynirê ya gerok, lê zêde bike data-bs-spy="scroll"û data-bs-target="#navId"li ku navIdye yekta idnavîgasyona têkildar. Bawer bikin ku di heman demê de ji tabindex="0"bo ku gihîştina klavyeyê piştrast bikin.
Gava ku hûn konteynera "sîxurî" digerînin, .activeçînek ji girêdanên lengerê di nav navîgasyona têkildar de tê zêdekirin û jêbirin. Pêdivî ye ku girêdan xwedî idarmancên çareserker bin, wekî din ew têne paşguh kirin. Mînakî, <a href="#home">home</a>pêdivî ye ku bi tiştek di DOM-ê de mîna hev re têkildar be<div id="home"></div>
Hêmanên armanc ên ku nayên dîtin dê bêne paşguh kirin. Binêre beşa hêmanên ne-xuya li jêr.

Examples

Li qada li jêr navbarê bigerin û li guhertina çîna çalak temaşe bikin. Menuya dakêşanê vekin û temaşe bikin ku hêmanên dakêşanê jî têne ronî kirin.

Sernavê yekem

Ev ji bo rûpela scrollspy hin naverokek cîhgir e. Bala xwe bidinê ku gava hûn rûpelê dakêşin, zencîreya navîgasyonê ya guncan tê ronî kirin. Ew li seranserê nimûneya pêkhatê tê dubare kirin. Em li vir kopiyek mînakek din lê zêde dikin da ku balê bikişîne ser gerok û ronîkirinê.

Sernavê duyemîn

Sernavê sêyemîn

Sernavê çaremîn

Sernavê pêncemîn

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

Nav hêlîn

Scrollspy jî bi .navs hêlînên dixebite. Heger hêlînek .navbe .activedê û bavê wî jî bibin .active. Li qada li kêleka navbarê bigerin û li guhertina çîna çalak temaşe bikin.