Bootstrap JS Scrollspy
JS прокрутка
Scrollspy используется для автоматического обновления ссылок в списке навигации в зависимости от положения прокрутки.
Учебное пособие по Scrollspy можно найти в нашем учебном пособии по Bootstrap Scrollspy .
Через атрибуты data-*
Добавьте data-spy="scroll"к элементу, который должен использоваться в качестве прокручиваемой области (часто это <body>элемент).
Затем добавьте data-targetатрибут со значением идентификатора или имени класса панели навигации ( .navbar). Это делается для того, чтобы панель навигации была связана с прокручиваемой областью.
Обратите внимание, что прокручиваемые элементы должны совпадать с идентификатором ссылок внутри элементов списка панели навигации (matches <div id="section1">) <a href="#section1">.
Необязательный data-offsetатрибут указывает количество пикселей для смещения сверху при расчете положения прокрутки. Это полезно, когда вы чувствуете, что ссылки внутри панели навигации меняют активное состояние слишком рано или слишком рано при переходе к прокручиваемым элементам. По умолчанию 10 пикселей.
Требуется относительное позиционирование: для правильной работы элементу с data-spy="scroll" требуется свойство position CSS со значением "относительное".
Пример
<!-- 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-, как в data-offset="".
| Name | Type | Default | Description | Try it |
|---|---|---|---|---|
| offset | number | 10 | Specifies the number of pixels to offset from top when calculating the position of scroll |
Методы прокрутки
В следующей таблице перечислены все доступные методы scrollspy.
| Method | Description |
|---|---|
| .scrollspy("refresh") | When adding and removing elements from the scrollspy, this method can be used to refresh the document |
| .scrollspy("dispose") | Destroys the scrollspy |
События прокрутки
В следующей таблице перечислены все доступные события scrollspy.
| Event | Description |
|---|---|
| activate.bs.scrollspy | Occurs when a new item becomes activated by the scrollspy |