Bootstrap 4 Scrollspy (продвинутый)
Bootstrap 4 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-expand-sm bg-dark navbar-dark fixed-top">
...
<ul class="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="1">
<div class="container-fluid">
<div class="row">
<nav class="col-sm-3
col-4" id="myScrollspy">
<ul class="nav nav-pills
flex-column">
<li class="nav-item">
<a class="nav-link active" href="#section1">Section 1</a>
</li>
...
</ul>
</nav>
<div class="col-sm-9
col-8">
<div id="section1">
<h1>Section 1</h1>
<p>Try to scroll this page and look at the
menu while scrolling!</p>
</div>
...
</div>
</div>
</div>
</body>
Полный справочник Bootstrap Scrollspy
Полную справку обо всех параметрах, методах и событиях scrollspy см. в нашем справочнике по Bootstrap JS Scrollspy .