Bootstrap JS Scrollspy
JS скроллспи
Скроллспи используется для автоматического обновления ссылок в списке переходов на основе положения прокрутки.
Для учебника о скроллспи, прочитайте наш Bootstrap скроллспи учебник.
Через Data-* атрибуты
Добавьте data-spy="scroll" к элементу, который должен использоваться в качестве прокручиваемой области (часто это <body> элемент).
Затем добавьте data-target атрибут со значением идентификатора или именем класса панели навигации ( .navbar ). Это необходимо для того, чтобы обеспечить связь навигационной области с прокручиваемой областью.
Обратите внимание, что прокручиваемые элементы должны совпадать с идентификатором ссылок в элементах списка навигации ( <div id="section1"> совпадения <a href="#section1"> ).
Необязательный data-offset атрибут указывает количество пикселов, которые должны быть смещены сверху при вычислении положения прокрутки. Это полезно, когда вы чувствуете, что ссылки внутри навигационной навигации изменяет активное состояние слишком рано или преждевременно при переходе к прокручиваемым элементам. Значение по умолчанию — 10 пикселей.
Требуется относительное позиционирование: Элемент с Data-Spy = "прокрутка" требует CSS position свойство, со значением "относительный" для правильной работы.
Пример
<!-- The scrollable area -->
<body data-spy="scroll"
data-target=".navbar" data-offset="50">
<!-- The navbar - The
<a> elements are used to jump to a section in the scrollable area -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#section1">Section 1</a>
</li>
....
</ul>
</nav>
<!-- Section 1
-->
<div id="section1">
<h1>Section 1</h1>
<p>Try to scroll this page and look at
the navigation bar while scrolling!</p>
</div>
...
</body>
Через JavaScript
Включить вручную с помощью:
Пример
$('body').scrollspy({target: ".navbar"})
Варианты скроллспи
Параметры могут быть переданы через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя параметра в Data-, как при смещении данных = "".
| Имя | Тип | По умолчанию | Описание | |
|---|---|---|---|---|
| offset | number | 10 | Указывает число пикселов для смещения сверху при вычислении положения прокрутки |
Скроллспи методы
В следующей таблице перечислены все доступные методы скроллспи.
| Метод | Описание |
|---|---|
| .scrollspy("refresh") | При добавлении и удалении элементов из скроллспи этот метод можно использовать для обновления документа |
| .scrollspy("dispose") | Разрушает скроллспи |
Скроллспи события
В следующей таблице перечислены все доступные события скроллспи.
| Событие | Описание |
|---|---|
| activate.bs.scrollspy | Происходит, когда новый элемент активируется скроллспи |