JS Scrollspy (scrollspy.js)
Плагин Scrollspy используется для автоматического обновления ссылок в списке навигации на основе положения прокрутки.
Для учебника о Scrollspy, читайте наш Bootstrap Scrollspy Учебник .
Совет: Плагин Scrollspy часто используется вместе с аффиксом плагин.
Via data-* Атрибуты
Добавьте data-spy="scroll" к элементу , который следует использовать в качестве прокруткой (часто это <body> элемент).
Затем добавьте data-target атрибут со значением идентификатора или имени класса навигационной панели ( .navbar ). Это , чтобы убедиться , что navbar связан с прокруткой.
Обратите внимание , что прокруткой элементы должны соответствовать идентификатор ссылок внутри элементов списка навигационной панели ( в <div id="section1"> соответствует <a href="#section1"> ).
Опциональный data-offset атрибут указывает количество пикселей на смещение от вершины при расчете положения прокрутки. Это полезно, когда вы чувствуете, что ссылки внутри навигационной панели изменяет активное состояние слишком рано или слишком рано, когда прыжки с прокруткой элементов. По умолчанию составляет 10 пикселей.
Требуется относительное позиционирование: Элемент с data-spy="scroll" требует CSS position свойство, со значением "relative" , чтобы работать должным образом .
пример
<!-- 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
Включить вручную с помощью:
Варианты Scrollspy
Параметры могут быть переданы с помощью атрибутов данных или JavaScript. Для атрибутов данных, добавьте имя параметра к данные-, так как в данных выносом = "".
| имя | Тип | По умолчанию | Описание | Попробуй |
|---|---|---|---|---|
| offset | number | 10 | Определяет количество пикселей, чтобы компенсировать сверху при расчете позиции прокрутки | Попробуй |
Методы Scrollspy
В следующей таблице перечислены все доступные scrollspy методы.
| метод | Описание | Попробуй |
|---|---|---|
| .scrollspy("refresh") | При добавлении и удалении элементов из scrollspy, этот метод может использоваться, чтобы обновить документ | Попробуй |
Scrollspy События
В следующей таблице перечислены все доступные scrollspy события.
| Мероприятие | Описание | Попробуй |
|---|---|---|
| activate.bs.scrollspy | Возникает, когда новый элемент активируется с помощью scrollspy | Попробуй |
Примеры
Scrollspy с анимированными прокрутки
Как добавить гладкой прокрутки страниц к якорю на той же странице:
Плавная прокрутка
// Add scrollspy to <body>
$('body').scrollspy({target: ".navbar",
offset: 50});
// Add smooth scrolling to all links inside a navbar
$("#myNavbar a").on('click', function(event){
//
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 (the speed of the animation)
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
}); Попробуй сам " Scrollspy & Аффикс
Использование аффикс плагин вместе с плагином Scrollspy:
Горизонтальное меню (Navbar)
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav
class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
...
</nav>
</body> Попробуй сам " Вертикальное меню (Sidenav)
<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> Попробуй сам "