Scrollspy Bootstrap 5

Scrollspy

Scrollspy используется дляПрокруткаЛинк в списке навигации обновляется автоматически.

Как создать Scrollspy

Ниже приведен пример создания Scrollspy:

Пример

<!-- Область прокрутки -->
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="50">
<!-- Навигационная панель - элементы <a> используются для перехода к определенным частям области прокрутки -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
  <ul class="navbar-nav">
    <li><a href="#section1">Раздел 1</a></li>
    ...
</nav>
<!-- Раздел 1 -->
<div id="section1">
  <h1>Раздел 1</h1>
  <p>Попробуйте прокрутить эту страницу и посмотреть, как изменяется навигационная панель!</p>
</div>
...
</body>

попробуйте сами

примеры объясняют

примените data-bs-spy="scroll" добавьте к элементу, используемому в качестве области прокрутки (обычно <body> элементы).

затем добавьте data-bs-target свойства, значение которого равно id или классу навигационной панели (.navbar) Это необходимо для обеспечения соответствия навигационной панели и области прокрутки.

Обратите внимание, что элементы, которые можно прокручивать, должны соответствовать ID ссылкам в списке навигации (<div id="section1"> Совпадение <a href="#section1">)

необязателен data-bs-offset Атрибут определяет количество пикселей смещения от верха при вычислении позиций прокрутки. Это полезно, если вы чувствуете, что активное состояние изменяется слишком рано при переходе по ссылкам в меню навигации к элементам, которые можно прокручивать. По умолчанию 10 пикселей.

необходима относительная позицияЭлементы с атрибутом data-bs-spy="scroll" требуют CSS Позиция Значение свойства должно быть установлено в "relative", чтобы работать правильно.