Bootstrap 4 Scrollspy (Advanced)
Bootstrap 4 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-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 ). Это необходимо для того, чтобы обеспечить связь навигационной области с прокручиваемой областью.
Обратите внимание, что прокручиваемые элементы должны совпадать с идентификатором ссылок в элементах списка навигации ( <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.
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.