Bootstrap JS Scrollspy
JS скроллспи (скроллспи. 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-inverse navbar-fixed-top">
...
<ul class="nav
navbar-nav">
<li><a href="#section1">Section 1</a></li>
...
</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") | При добавлении и удалении элементов из скроллспи этот метод можно использовать для обновления документа |
Скроллспи события
В следующей таблице перечислены все доступные события скроллспи.
| Событие | Описание | |
|---|---|---|
| activate.bs.scrollspy | Происходит, когда новый элемент активируется скроллспи |
Другие примеры
Скроллспи с анимированным свитком
Как добавить гладкую страницу прокрутки к якоря на той же странице:
Smooth scrolling
// Add scrollspy to <body>
$('body').scrollspy({target: ".navbar", offset: 50});
// Add smooth scrolling on all links inside the navbar
$("#myNavbar a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
Скроллспи & прикрепить
Использование плагина прикрепить вместе с плагином скроллспи:
Горизонтальное меню (навигационный)
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
...
</nav>
</body>
Вертикальное меню (сиденав)
<body data-spy="scroll" data-target="#myScrollspy" data-offset="15">
<nav class="col-sm-3" id="myScrollspy">
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
...
</nav>
</body>
