Scrollspy Bootstrap 5

Scrollspy

Scrollspy używany doPrzewijanieAutomatyczne aktualizowanie listy linków w nawigacji.

Jak utworzyć Scrollspy

Jak utworzyć Scrollspy

Poniższy przykład pokazuje, jak utworzyć Scrollspy:

Przykład
<!-- Obszar przewijany -->
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="50">
<!-- Nawigacja - <a> elementy są używane do przechodzenia do części w obszarze przewijanym -->
</div>
  <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
    <ul class="navbar-nav">
    </div>
<li><a href="#section1">Sekcja 1</a></li>
</nav>
<div id="section1">
  <!-- Sekcja 1 -->
  <h1>Sekcja 1</h1>
<p>Proszę spróbować przewinąć tę stronę i zobaczyć, jak zmienia się nawigacja podczas przewijania!</p>
</div>
...

</body>

Spróbuj sam

Przykład wyjaśnienia data-bs-spy="scroll" Dodaj do elementu, który jest używany jako obszar przewijany (zwykle <body> element).

Następnie dodaj data-bs-target Atrybut, którego wartością jest id lub klasa nawigacji (.navbar). To zapewnia, że nawigacja jest połączone z obszarem przewijanym.

Proszę zauważyć, że elementy przewijane muszą mieć ID, które pasuje do linków w liście nawigacyjnej (<div id="section1"> Dopasowanie <a href="#section1">)

Opcjonalny data-bs-offset Atrybut określa liczbę pikseli przesunięcia od góry, z którego liczy się pozycję przewijania. Jest to przydatne, gdy linki w pasku nawigacyjnym przechodzą do elementów przewijanych i zmieniają stan aktywny zbyt wcześnie. Domyślna wartość to 10 pikseli.

Wymagana pozycja względnaElementy z atrybutem data-bs-spy="scroll" wymagają CSS Position Wartość atrybutu properties musi być ustawiona na "relative", aby działać poprawnie.