Bootstrap скроллспи плагин (расширенный)
Скроллспи плагин
Плагин скроллспи используется для автоматического обновления ссылок в списке навигации на основе положения прокрутки.
Как создать скроллспи
В следующем примере показано, как создать скроллспи:
Пример
<!-- 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 ). Это необходимо для того, чтобы обеспечить связь навигационной области с прокручиваемой областью.
Обратите внимание, что прокручиваемые элементы должны совпадать с идентификатором ссылок в элементах списка навигации ( <div id="section1"> совпадения <a href="#section1"> ).
Необязательный data-offset атрибут указывает количество пикселов, которые должны быть смещены сверху при вычислении положения прокрутки. Это полезно, когда вы чувствуете, что ссылки внутри навигационной навигации изменяет активное состояние слишком рано или преждевременно при переходе к прокручиваемым элементам. Значение по умолчанию — 10 пикселей.
Requires relative positioning: The element with data-spy="scroll" requires the CSS position property, with a value of "relative" to work properly.
Скроллспи вертикальное меню
В этом примере мы используем вертикальные навигационные таблетки 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 скроллспи
Для полной справки всех скроллспи методов и событий, перейдите на наш Ссылка Bootstrap JS скроллспи.
