Сцроллспи

Аутоматски ажурирајте Боотстрап навигацију или компоненте листе групе на основу положаја померања да бисте назначили која је веза тренутно активна у оквиру за приказ.

На овој страници

Како то ради

Сцроллспи има неколико захтева за правилно функционисање:

Мора се користити на Боотстрап навигационој компоненти или групи листе .
Сцроллспи захтева position: relative;елемент који шпијунирате, обично <body>.
Сидра ( <a>) су обавезна и морају показивати на елемент са тим id.

Када се успешно примени, ваша навигација или група листа ће се ажурирати у складу са тим, премештајући .activeкласу са једне ставке на другу на основу њихових повезаних циљева.

Контејнери који се могу померати и приступ тастатури

Ако правите контејнер који може да се помера (осим <body>), уверите се да имате heightсет и overflow-y: scroll;примените га на њега — поред а tabindex="0"да бисте обезбедили приступ тастатури.

Померајте област испод траке за навигацију и гледајте како се активна класа мења. Падајуће ставке ће такође бити истакнуте.

Први наслов

Ово је неки садржај чувара места за страницу за скроловање. Имајте на уму да док скролујете надоле по страници, одговарајућа веза за навигацију је истакнута. Понавља се у целом примеру компоненте. Овде настављамо да додајемо још примерака да бисмо нагласили померање и истицање.

Други наслов

Трећи наслов

Четврти наслов

Пети наслов

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

Пример са угнежђеним нав

Сцроллспи такође ради са угнежђеним .navс. .navАко је угнежђено .active, његови родитељи ће такође бити .active. Померајте област поред навигационе траке и гледајте како се активни разред мења.

Ставка 1

Ставка 1-1

Ставка 1-2

тачка 2

тачка 3

Ставка 3-1

тачка 3-2

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

Пример са лист-групом

Сцроллспи такође ради са .list-groupс. Померите област поред групе листе и гледајте како се активна класа мења.

Ставка 1 тачка 2 тачка 3 тачка 4

Ставка 1

тачка 2

тачка 3

тачка 4

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

Употреба

Преко атрибута података

Да бисте лако додали понашање скроловања вашој навигацији на горњој траци, додајте data-bs-spy="scroll"елементу који желите да шпијунирате (најчешће би то био <body>). Затим додајте data-bs-targetатрибут са ИД-ом или класом родитељског елемента било које Боотстрап .navкомпоненте.

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>

Преко ЈаваСцрипт-а

Након што додате position: relative;свој ЦСС, позовите сцроллспи преко ЈаваСцрипт-а:

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

Потребни су решиви циљеви ИД-а

Везе за Навбар морају имати разлучиве циљеве ИД-а. На пример, <a href="#home">home</a>мора одговарати нечему у ДОМ-у као што је <div id="home"></div>.

Невидљиви циљни елементи су занемарени

Циљни елементи који нису видљиви биће занемарени и њихове одговарајуће навигационе ставке никада неће бити истакнуте.

Методе

Освјежи

Када користите сцроллспи у комбинацији са додавањем или уклањањем елемената из ДОМ-а, мораћете да позовете метод освежавања на следећи начин:

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

располагати

Уништава шпијун за померање елемента. (Уклања сачуване податке на ДОМ елементу)

гетИнстанце

Статичка метода која вам омогућава да добијете сцроллспи инстанцу повезану са ДОМ елементом

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

гетОрЦреатеИнстанце

Статичка метода која вам омогућава да добијете сцроллспи инстанцу повезану са ДОМ елементом или да креирате нову у случају да није иницијализована

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

Опције

Опције се могу пренети преко атрибута података или ЈаваСцрипт-а. За атрибуте података додајте име опције у data-bs-, као у data-bs-offset="".

Име	Тип	Уобичајено	Опис
`offset`	број	`10`	Пиксели за померање од врха приликом израчунавања положаја померања.
`method`	низ	`auto`	Проналази у ком се одељку налази шпијунирани елемент. Одабраће `auto`најбољи метод за добијање координата за померање. `offset`користиће `Element.getBoundingClientRect()`метод за добијање координата за померање. `position`користиће својства `HTMLElement.offsetTop`и за добијање координата за померање.`HTMLElement.offsetLeft`
`target`	стринг \| јКуери објекат \| ДОМ елемент		Одређује елемент за примену додатка Сцроллспи.

Догађаји

Тип догађаја	Опис
`activate.bs.scrollspy`	Овај догађај се покреће на елементу за померање сваки пут када се нова ставка активира од стране сцроллспи-а.

var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
  // do something...
})

Сцроллспи

Како то ради

Контејнери који се могу померати и приступ тастатури

Пример у навигационој траци

Први наслов

Други наслов

Трећи наслов

Четврти наслов

Пети наслов

Пример са угнежђеним нав

Ставка 1

Ставка 1-1

Ставка 1-2

тачка 2

тачка 3

Ставка 3-1

тачка 3-2

Пример са лист-групом

Ставка 1

тачка 2

тачка 3

тачка 4

Употреба

Преко атрибута података

Преко ЈаваСцрипт-а

Потребни су решиви циљеви ИД-а

Невидљиви циљни елементи су занемарени

Методе

Освјежи

располагати

гетИнстанце

гетОрЦреатеИнстанце

Опције

Догађаји