Bootstrap JS Scrollspy
JS Scrollspy (scrollspy.js)
Плагин Scrollspy используется для автоматического обновления ссылок в списке навигации в зависимости от положения прокрутки.
Учебное пособие по Scrollspy можно найти в нашем учебном пособии по Bootstrap Scrollspy .
Совет: Плагин Scrollspy часто используется вместе с плагином Affix .
Через атрибуты 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-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-, как в 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 | Try it |
|---|---|---|
| .scrollspy("refresh") | When adding and removing elements from the scrollspy, this method can be used to refresh the document |
События прокрутки
В следующей таблице перечислены все доступные события scrollspy.
| Event | Description | Try it |
|---|---|---|
| activate.bs.scrollspy | Occurs when a new item becomes activated by the scrollspy |
Дополнительные примеры
Scrollspy с анимированной прокруткой
Как добавить плавную прокрутку страницы к якорю на той же странице:
Плавная прокрутка
// 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
});
Scrollspy & Affix
Использование плагина Affix вместе с плагином Scrollspy:
Горизонтальное меню (навигационная панель)
<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>