Для отслеживания прокрутки и обновления активных ссылок в навигации в соответствии с прокруткой страницы в Bootstrap v5, вы можете воспользоваться компонентом ScrollSpy. ScrollSpy автоматически обновляет ссылки в компоненте навигации, чтобы отражать текущую область просмотра пользователя.
Чтобы настроить ScrollSpy в Bootstrap v5, следуйте этим шагам:
1. Подключите Bootstrap через CDN или убедитесь, что Bootstrap JavaScript подключен к вашей странице.
2. Поместите вашу навигацию в элемент навигации (`<nav>`) или список (`<ul>`). Каждая ссылка в навигации должна использовать атрибут `href` для указания на соответствующий id элемента в теле документа, к которому страница будет прокручиваться.
3. Примените `data-bs-spy="scroll"` и `data-bs-target="#yourNav"` к родительскому элементу содержимого, где `#yourNav` – это идентификатор вашего навигационного меню. Также установите атрибут `data-bs-offset` для корректировки автоматического смещения, например, чтобы учесть плавающий заголовок.
Пример кода:
```html
<body data-bs-spy="scroll" data-bs-target="#navbar-example" data-bs-offset="65">
<nav id="navbar-example" class="navbar navbar-light bg-light fixed-top">
<ul class="nav nav-pills">
<li class="nav-item"><a class="nav-link" href="#section1">Section 1</a></li>
<li class="nav-item"><a class="nav-link" href="#section2">Section 2</a></li>
<li class="nav-item"><a class="nav-link" href="#section3">Section 3</a></li>
</ul>
</nav>
<div class="container mt-5 pt-3">
<h4 id="section1">Section 1</h4>
<p>...</p>
<h4 id="section2">Section 2</h4>
<p>...</p>
<h4 id="section3">Section 3</h4>
<p>...</p>
</div>
</body>
```
В этом примере установлено смещение в 65px, чтобы учесть высоту плавающего заголовка при прокрутке.
Чтобы решить проблему с "улетанием" заголовков под верхний header при нажатии, можно воспользоваться CSS для добавления псевдоэлемента перед заголовком с отрицательным отступом, который скомпенсирует высоту шапки:
```css
h4::before {
display: block;
content: "";
margin-top: -64px; /* Высота вашего 'header'. */
height: 64px; /* Высота вашего 'header'. */
visibility: hidden;
}
```
Этот CSS создаст невидимый элемент с отрицательным отступом перед каждым `h4` (или другим выбранным элементом заголовка), который сработает как буферная зона для прокрутки.
