Biçe ser naveroka sereke Biçe navîgasyon belgeyan
in English

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 çend hewcedariyên xwe hene ku bi rêkûpêk bixebitin:

  • Pêdivî ye ku ew li ser pêkhateyek navokê ya Bootstrap an koma navnîşê were bikar anîn .
  • Scrollspy position: relative;li ser hêmana ku hûn li ser sîxuriyê dikin, bi gelemperî pêdivî ye <body>.
  • Anker ( <a>) hewce ne û divê hêmanek pê re nîşan bidin id.

Dema ku bi serfirazî were sepandin, koma nav an navnîşa we dê li gorî wê nûve bike, li gorî .activearmancên wan ên têkildar polê ji yek babetekê berbi ya din veguhezîne.

Konteynirên scrollable û gihîştina klavyeyê

Ger hûn konteynirek gerok çêdikin (ji xeynî <body>), pê ewle bin ku pêvek hebe heightû pê ve overflow-y: scroll;were sepandin - li kêleka a tabindex="0"da ku gihîştina klavyeyê misoger bike.

Mînak di navbarê de

Li qada li jêr navbarê bigerin û li guhertina çîna çalak temaşe bikin. Dê hêmanên dakêşanê jî werin 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

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ê sêyemîn

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ê çaremîn

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ê pêncemîn

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

<nav id="navbar-example2" class="navbar navbar-light bg-light px-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-offset="0" class="scrollspy-example" 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>

Mînak bi 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.

Babetê 1

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

Babetê 1-1

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

Babetê 1-2

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

Babetê 2

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

Babetê 3

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

Babetê 3-1

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

Babetê 3-2

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

<nav id="navbar-example3" class="navbar navbar-light bg-light flex-column align-items-stretch p-3">
  <a class="navbar-brand" href="#">Navbar</a>
  <nav class="nav nav-pills flex-column">
    <a class="nav-link" href="#item-1">Item 1</a>
    <nav class="nav nav-pills flex-column">
      <a class="nav-link ms-3 my-1" href="#item-1-1">Item 1-1</a>
      <a class="nav-link ms-3 my-1" href="#item-1-2">Item 1-2</a>
    </nav>
    <a class="nav-link" href="#item-2">Item 2</a>
    <a class="nav-link" href="#item-3">Item 3</a>
    <nav class="nav nav-pills flex-column">
      <a class="nav-link ms-3 my-1" href="#item-3-1">Item 3-1</a>
      <a class="nav-link ms-3 my-1" href="#item-3-2">Item 3-2</a>
    </nav>
  </nav>
</nav>

<div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" tabindex="0">
  <h4 id="item-1">Item 1</h4>
  <p>...</p>
  <h5 id="item-1-1">Item 1-1</h5>
  <p>...</p>
  <h5 id="item-1-2">Item 1-2</h5>
  <p>...</p>
  <h4 id="item-2">Item 2</h4>
  <p>...</p>
  <h4 id="item-3">Item 3</h4>
  <p>...</p>
  <h5 id="item-3-1">Item 3-1</h5>
  <p>...</p>
  <h5 id="item-3-2">Item 3-2</h5>
  <p>...</p>
</div>

Mînak bi lîsteya-komê

Scrollspy jî bi .list-groups dixebite. Li qada li kêleka koma navnîşê bigerin û li guhertina çîna çalak temaşe bikin.

Babetê 1

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

Babetê 2

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

Babetê 3

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

Babetê 4

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

<div id="list-example" class="list-group">
  <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
  <a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
  <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
  <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
</div>
<div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" class="scrollspy-example" tabindex="0">
  <h4 id="list-item-1">Item 1</h4>
  <p>...</p>
  <h4 id="list-item-2">Item 2</h4>
  <p>...</p>
  <h4 id="list-item-3">Item 3</h4>
  <p>...</p>
  <h4 id="list-item-4">Item 4</h4>
  <p>...</p>
</div>

Bikaranîna

Bi taybetmendiyên daneyê

Ji bo ku bi hêsanî behreya scrollspy li navîgasyona xweya jorîn zêde data-bs-spy="scroll"bikin, li hêmana ku hûn dixwazin bişopînin lê zêde bikin (bi gelemperî ev dê bibe <body>). Dûv re data-bs-targettaybetmendiyê bi ID an pola hêmana dêûbavê ya her .navpêkhateyek Bootstrap ve zêde bikin.

body {
  position: relative;
}

<body data-bs-spy="scroll" data-bs-target="#navbar-example">
  ...
  <div id="navbar-example">
    <ul class="nav nav-tabs" role="tablist">
      ...
    </ul>
  </div>
  ...
</body>

Bi JavaScript

Piştî ku position: relative;CSS-ya xwe zêde kirin, bi JavaScript-ê re bang bikin scrollspy:

var scrollSpy = new bootstrap.ScrollSpy(document.body, {
  target: '#navbar-example'
})

Armancên nasnameyê yên çareserkirî hewce ne

Pêdivî ye ku girêdanên navbar xwedî armancên nasnameyê yên çareserkirî bin. Mînakî, <a href="#home">home</a>pêdivî ye ku bi tiştek di DOM-ê de mîna <div id="home"></div>.

Hêmanên armancê yên ne-dîtbar paşguh kirin

Hêmanên mebest ên ku ne diyar in dê werin paşguh kirin û tiştên navika wan ên têkildar dê çu carî neyên ronî kirin.

Methods

hênikkirin

Dema ku scrollspy digel lê zêdekirin an rakirina hêmanan ji DOM-ê re bikar bînin, hûn ê hewce bikin ku rêbaza nûvekirinê ya weha bang bikin:

var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
  bootstrap.ScrollSpy.getInstance(dataSpyEl)
    .refresh()
})

avêtin

Scrollspy ya hêmanek hilweşîne. (Daneyên hilanîn ên li ser hêmana DOM-ê radike)

getInstance

Rêbaza statîk ku dihêle hûn mînaka scrollspy-ê ya ku bi hêmanek DOM-ê ve girêdayî ye bistînin

var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance

getOrCreateInstance

Rêbaza statîkî ya ku dihêle hûn mînaka scrollspy-ya ku bi hêmanek DOM-ê ve girêdayî ye bistînin, an heke ew nehatibe destpêkirin yek nû biafirînin.

var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance

Vebijêrk

Vebijark dikarin bi taybetmendiyên daneyan an JavaScriptê ve werin derbas kirin. Ji bo taybetmendiyên daneyê, navê vebijarkê lê zêde bikin data-bs-, wekî di data-bs-offset="".

Nav Awa Destçûnî Terîf
offset jimare 10 Pixelên ku ji jor ve têne veqetandin dema ku pozîsyona gerokê hesab dikin.
method ben auto Dibîne ku hêmana sîxur di kîjan beşê de ye. autoJi bo bidestxistina koordînatên gerîdeyê dê rêbaza çêtirîn hilbijêrin. offsetdê Element.getBoundingClientRect()rêbazê bikar bîne da ku hevrêzên gerokê bigire. positiondê taybetmendî HTMLElement.offsetTopû HTMLElement.offsetLefttaybetmendiyan bikar bîne da ku hevrêzên gerokê bigire.
target string | jQuery object | hêmana DOM Hêmanek diyar dike ku pêveka Scrollspy bicîh bîne.

Events

Cureyê bûyerê Terîf
activate.bs.scrollspy Dema ku babetek nû ji hêla scrollspy ve tê çalak kirin ev bûyer li ser hêmana gerokê dişewite. 
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
  // do something...
})