Scrollspy Plugin
Плагин Scrollspy используется для автоматического обновления ссылок в списке навигации на основе положения прокрутки.
Как создать Scrollspy
В следующем примере показано, как создать scrollspy:
пример
<!-- 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> Попробуй сам " Пример Разъяснения
Добавьте data-spy="scroll" к элементу , который следует использовать в качестве прокруткой (часто это <body> элемент).
Затем добавьте data-target атрибут со значением идентификатора или имени класса навигационной панели ( .navbar ). Это, чтобы убедиться, что Navbar связан с прокруткой.
Обратите внимание , что прокруткой элементы должны соответствовать идентификатор ссылок внутри элементов списка навигационной панели ( в <div id="section1"> соответствует <a href="#section1"> ).
Опциональный data-offset атрибут указывает количество пикселей на смещение от вершины при расчете положения прокрутки. Это полезно, когда вы чувствуете, что ссылки внутри навигационной панели изменяет активное состояние слишком рано или слишком рано, когда прыжки с прокруткой элементов. По умолчанию составляет 10 пикселей.
Требуется относительное позиционирование: Элемент с data-spy="scroll" требует CSS position свойство, со значением "relative" , чтобы работать должным образом .
Scrollspy Вертикальное меню
В этом примере мы используем вертикальные навигационные таблетки бутстрапе как меню:
пример
<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
<div class="container">
<div class="row">
<nav class="col-sm-3" id="myScrollspy">
<ul class="nav nav-pills nav-stacked">
<li><a href="#section1">Section 1</a></li>
...
</ul>
</nav>
<div
class="col-sm-9">
<div id="section1">
<h1>Section 1</h1>
<p>Try to
scroll this page and look at the navigation list while scrolling!</p>
</div>
...
</div>
</div>
</div>
</body> Попробуй сам " Полное Bootstrap Scrollspy Reference
Для полного ведения всех scrollspy методов и событий, перейдите на наш Bootstrap JS Scrollspy Reference .