Сцроллспи
Аутоматски ажурирајте Боотстрап навигацију или компоненте листе групе на основу положаја померања да бисте назначили која је веза тренутно активна у оквиру за приказ.
Како то ради
Сцроллспи има неколико захтева за правилно функционисање:
- Мора се користити на Боотстрап навигационој компоненти или групи листе .
- Сцроллспи захтева
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
Ово је неки садржај чувара места за страницу за скроловање. Имајте на уму да док скролујете надоле по страници, одговарајућа веза за навигацију је истакнута. Понавља се у целом примеру компоненте. Овде настављамо да додајемо још примерака да бисмо нагласили померање и истицање.
<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...
})