Scrollspy
Автоматски ажурирајте ја навигацијата на Bootstrap или наведете ги компонентите на групата врз основа на позицијата на лизгање за да покаже која врска е моментално активна во приказот.
Како работи
Scrollspy има неколку барања за правилно функционирање:
- Мора да се користи на компонента за навигација на Bootstrap или група списоци .
- Scrollspy бара
position: relative;
елементот што го шпионирате, обично<body>
. - Сидра (
<a>
) се потребни и мора да укажуваат на елемент со тоаid
.
Кога успешно ќе се имплементира, вашата навигација или групата списоци соодветно ќе се ажурира, преместувајќи ја .active
класата од една ставка во друга врз основа на нивните поврзани цели.
Контејнери со можност за лизгање и пристап до тастатура
Ако правите контејнер што може да се движи (освен <body>
), погрижете се да имате height
сет и overflow-y: scroll;
да го примените на него - заедно со a tabindex="0"
за да обезбедите пристап до тастатурата.
Пример во navbar
Скролувајте ја областа под лентата за навигација и гледајте како се менува активната класа. Ставките од паѓачкото мени исто така ќе бидат означени.
Првиот наслов
Ова е содржина на место за место за страницата scrollspy. Забележете дека додека лизгате надолу по страницата, соодветната врска за навигација е означена. Се повторува низ целиот пример на компонентата. Овде продолжуваме да додаваме уште неколку примероци за да го нагласиме лизгањето и истакнувањето.
Втор наслов
Ова е содржина на место за место за страницата scrollspy. Забележете дека додека лизгате надолу по страницата, соодветната врска за навигација е означена. Се повторува низ целиот пример на компонентата. Овде продолжуваме да додаваме уште неколку примероци за да го нагласиме лизгањето и истакнувањето.
Трет наслов
Ова е содржина на место за место за страницата scrollspy. Забележете дека додека лизгате надолу по страницата, соодветната врска за навигација е означена. Се повторува низ целиот пример на компонентата. Овде продолжуваме да додаваме уште неколку примероци за да го нагласиме лизгањето и истакнувањето.
Четвртиот наслов
Ова е содржина на место за место за страницата scrollspy. Забележете дека додека лизгате надолу по страницата, соодветната врска за навигација е означена. Се повторува низ целиот пример на компонентата. Овде продолжуваме да додаваме уште неколку примероци за да го нагласиме лизгањето и истакнувањето.
Петти наслов
Ова е содржина на место за место за страницата scrollspy. Забележете дека додека лизгате надолу по страницата, соодветната врска за навигација е означена. Се повторува низ целиот пример на компонентата. Овде продолжуваме да додаваме уште неколку примероци за да го нагласиме лизгањето и истакнувањето.
<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>
Пример со вгнездена навигација
Scrollspy работи и со вгнездени .nav
с. .nav
Ако е вгнездено .active
, ќе бидат и неговите родители .active
. Скролувајте ја областа до лентата за навигација и гледајте како се менува активната класа.
Точка 1
Ова е содржина на место за место за страницата scrollspy. Забележете дека додека лизгате надолу по страницата, соодветната врска за навигација е означена. Се повторува низ целиот пример на компонентата. Овде продолжуваме да додаваме уште неколку примероци за да го нагласиме лизгањето и истакнувањето.
Точка 1-1
Ова е содржина на место за место за страницата scrollspy. Забележете дека додека лизгате надолу по страницата, соодветната врска за навигација е означена. Се повторува низ целиот пример на компонентата. Овде продолжуваме да додаваме уште неколку примероци за да го нагласиме лизгањето и истакнувањето.
Точка 1-2
Ова е содржина на место за место за страницата scrollspy. Забележете дека додека лизгате надолу по страницата, соодветната врска за навигација е означена. Се повторува низ целиот пример на компонентата. Овде продолжуваме да додаваме уште неколку примероци за да го нагласиме лизгањето и истакнувањето.
Точка 2
Ова е содржина на место за место за страницата scrollspy. Забележете дека додека лизгате надолу по страницата, соодветната врска за навигација е означена. Се повторува низ целиот пример на компонентата. Овде продолжуваме да додаваме уште неколку примероци за да го нагласиме лизгањето и истакнувањето.
Точка 3
Ова е содржина на место за место за страницата scrollspy. Забележете дека додека лизгате надолу по страницата, соодветната врска за навигација е означена. Се повторува низ целиот пример на компонентата. Овде продолжуваме да додаваме уште неколку примероци за да го нагласиме лизгањето и истакнувањето.
Точка 3-1
Ова е содржина на место за место за страницата scrollspy. Забележете дека додека лизгате надолу по страницата, соодветната врска за навигација е означена. Се повторува низ целиот пример на компонентата. Овде продолжуваме да додаваме уште неколку примероци за да го нагласиме лизгањето и истакнувањето.
Точка 3-2
Ова е содржина на место за место за страницата scrollspy. Забележете дека додека лизгате надолу по страницата, соодветната врска за навигација е означена. Се повторува низ целиот пример на компонентата. Овде продолжуваме да додаваме уште неколку примероци за да го нагласиме лизгањето и истакнувањето.
<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>
Пример со листа-група
Scrollspy работи и со .list-group
s. Скролувајте ја областа до групата списоци и гледајте како се менува активната класа.
Точка 1
Ова е содржина на место за место за страницата scrollspy. Забележете дека додека лизгате надолу по страницата, соодветната врска за навигација е означена. Се повторува низ целиот пример на компонентата. Овде продолжуваме да додаваме уште неколку примероци за да го нагласиме лизгањето и истакнувањето.
Точка 2
Ова е содржина на место за место за страницата scrollspy. Забележете дека додека лизгате надолу по страницата, соодветната врска за навигација е означена. Се повторува низ целиот пример на компонентата. Овде продолжуваме да додаваме уште неколку примероци за да го нагласиме лизгањето и истакнувањето.
Точка 3
Ова е содржина на место за место за страницата scrollspy. Забележете дека додека лизгате надолу по страницата, соодветната врска за навигација е означена. Се повторува низ целиот пример на компонентата. Овде продолжуваме да додаваме уште неколку примероци за да го нагласиме лизгањето и истакнувањето.
Точка 4
Ова е содржина на место за место за страницата scrollspy. Забележете дека додека лизгате надолу по страницата, соодветната врска за навигација е означена. Се повторува низ целиот пример на компонентата. Овде продолжуваме да додаваме уште неколку примероци за да го нагласиме лизгањето и истакнувањето.
<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
атрибутот со ID или класа на родителскиот елемент на која било .nav
компонента Bootstrap.
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>
Преку JavaScript
Откако ќе го додадете position: relative;
во вашиот CSS, повикајте го scrollspy преку JavaScript:
var scrollSpy = new bootstrap.ScrollSpy(document.body, {
target: '#navbar-example'
})
Потребни се решливи цели за ID
Врските на Navbar мора да имаат решливи цели за идентификација. На пример, <a href="#home">home</a>
мора да одговара на нешто во DOM како <div id="home"></div>
.
Невидливите целни елементи се игнорирани
Целните елементи што не се видливи ќе бидат игнорирани и нивните соодветни ставки за навигација никогаш нема да бидат означени.
Методи
освежи
Кога користите scrollspy во врска со додавање или отстранување на елементи од DOM, ќе треба да го повикате методот на освежување вака:
var dataSpyList = [].slice.call(document.querySelectorAll('[data-bs-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
bootstrap.ScrollSpy.getInstance(dataSpyEl)
.refresh()
})
располага
Уништува запис на елементот. (Ги отстранува зачуваните податоци на елементот DOM)
getInstance
Статичен метод кој ви овозможува да го добиете примерот на scrollspy поврзан со елемент DOM
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
getOrCreateInstance
Статичен метод кој ви овозможува да го добиете примерот на scrollspy поврзан со елемент DOM или да создадете нов во случај да не е иницијализиран
var scrollSpyContentEl = document.getElementById('content')
var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance
Опции
Опциите може да се пренесат преку атрибути на податоци или JavaScript. За атрибути на податоци, додајте го името на опцијата на data-bs-
, како во data-bs-offset=""
.
Име | Тип | Стандардно | Опис |
---|---|---|---|
offset |
број | 10 |
Пиксели за поместување од врвот при пресметување на позицијата на лизгање. |
method |
низа | auto |
Открива во кој дел се наоѓа шпионираниот елемент. auto ќе го избере најдобриот метод за добивање координати за лизгање. offset ќе го користи Element.getBoundingClientRect() методот за да добие координати за лизгање. position ќе ги користи својствата HTMLElement.offsetTop и HTMLElement.offsetLeft за да добие координати за лизгање. |
target |
низа | jQuery објект | DOM елемент | Одредува елемент за примена на приклучокот Scrollspy. |
Настани
Тип на настан | Опис |
---|---|
activate.bs.scrollspy |
Овој настан се вклучува на елементот за лизгање секогаш кога ќе се активира нова ставка од scrollspy. |
var firstScrollSpyEl = document.querySelector('[data-bs-spy="scroll"]')
firstScrollSpyEl.addEventListener('activate.bs.scrollspy', function () {
// do something...
})