Плагин Bootstrap Scrollspy (расширенный)
Плагин 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). Это делается для того, чтобы панель навигации была связана с прокручиваемой областью.
Обратите внимание, что прокручиваемые элементы должны совпадать с идентификатором ссылок внутри элементов списка панели навигации (matches <div id="section1">) <a href="#section1">.
Необязательный data-offsetатрибут указывает количество пикселей для смещения сверху при расчете положения прокрутки. Это полезно, когда вы чувствуете, что ссылки внутри панели навигации меняют активное состояние слишком рано или слишком рано при переходе к прокручиваемым элементам. По умолчанию 10 пикселей.
Требуется относительное позиционирование: для правильной работы элементу с data-spy="scroll" требуется свойство position CSS со значением "относительное".
Вертикальное меню Scrollspy
В этом примере мы используем вертикальные навигационные панели Bootstrap в качестве меню:
Пример
<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
Полный справочник по всем методам и событиям scrollspy см. в нашем справочнике по Bootstrap JS Scrollspy .