Bootstrap5 Scrollspy
Плагин Scrollspy, то есть плагин автоматического обновления навигации, автоматически обновляет соответствующую цель навигации в зависимости от положения полосы прокрутки. Его базовая реализация следует за прокруткой.
Как создать Scrollspy
В следующем примере показано, как создать Scrollspy:
Пример
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="50">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
<ul class="navbar-nav">
<li><a href="#section1">Раздел 1</a></li>
...
</nav>
<div id="section1">
<h1>Раздел 1</h1>
<p>Попробуйте прокрутить эту страницу и понаблюдайте за панелью навигации во время прокрутки!</p>
</div>
...
</body>
Попробуйте сами »
Разбор примера
Добавьте к элементу, который хотите отслеживать (обычно body)data-bs-spy="scroll" 。
Затем добавьтеdata-bs-targetатрибут, значение которого — id или класс панели навигации (.navbar). Это привязывает к области прокрутки.
Обратите внимание, что id на элементах с прокруткой (<div id="section1">) должен совпадать с параметрами ссылки на панели навигации (<a href="../index.html">).
Необязательныйdata-bs-offsetатрибут используется для вычисления смещения в пикселях от верхнего края при вычислении позиции прокрутки. Значение по умолчанию — 10px.
Установите относительное позиционирование:Использованиеdata-spy="scroll"элементов требует установки их CSSpositionатрибута в"relative"чтобы работало.
В следующем примере настраивается вертикальный scrollspy:
Пример
<div class="row">
<div class="col-4">
<nav id="navbar-example3" class="navbar navbar-light bg-light flex-column align-items-stretch p-3">
<a class="navbar-brand" href="#">Навигационная панель</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link" href="#item-1">Пункт 1</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#item-1-1">Пункт 1-1</a>
<a class="nav-link ms-3 my-1" href="#item-1-2">Пункт 1-2</a>
</nav>
<a class="nav-link" href="#item-2">Пункт 2</a>
<a class="nav-link active" href="#item-3">Элемент 3</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#item-3-1">Элемент 3-1</a>
<a class="nav-link ms-3 my-1 active" href="#item-3-2">Элемент 3-2</a>
</nav>
</nav>
</nav>
</div>
<div class="col-8">
<div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-offset="0" class="scrollspy-example-2" tabindex="0">
<h4 id="item-1">Элемент 1</h4>
<p>...</p>
<h5 id="item-1-1">Элемент 1-1</h5>
<p>...</p>
<h5 id="item-1-2">Элемент 1-2</h5>
<p>...</p>
<h4 id="item-2">Элемент 2</h4>
<p>...</p>
<h4 id="item-3">Элемент 3</h4>
<p>...</p>
<h5 id="item-3-1">Элемент 3-1</h5>
<p>...</p>
<h5 id="item-3-2">Элемент 3-2</h5>
<p>...</p>
</div>
</div>
</div>
Попробуйте сами »
Форма группы списка:
Пример
<div id="list-example" class="list-group">
<a class="list-group-item list-group-item-action" href="#list-item-1">Элемент 1</a>
<a class="list-group-item list-group-item-action" href="#list-item-2">Элемент 2</a>
<a class="list-group-item list-group-item-action" href="#list-item-3">Элемент 3</a>
<a class="list-group-item list-group-item-action" href="#list-item-4">Элемент 4</a>
</div>
<div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-offset="0" class="scrollspy-example" tabindex="0">
<h4 id="list-item-1">Элемент 1</h4>
<p>...</p>
<h4 id="list-item-2">Элемент 2</h4>
<p>...</p>
<h4 id="list-item-3">Элемент 3</h4>
<p>...</p>
<h4 id="list-item-4">Элемент 4</h4>
<p>...</p>
</div>
Попробуйте сами »
Другие расширения