Scrollspy Bootstrap 5

Scrollspy

Scrollspy é usado paraRolarO local é atualizado automaticamente na lista de links da navegação.

Como criar Scrollspy

Como criar Scrollspy

O exemplo a seguir mostra como criar Scrollspy:

Exemplo
<!-- Área rolável -->
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="50">
<!-- Barra de navegação - Elementos <a> são usados para saltar para uma seção específica do conteúdo rolável -->
</div>
  <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
    <ul class="navbar-nav">
    </div>
<li><a href="#section1">Seção 1</a></li>
</nav>
<div id="section1">
  <!-- Seção 1 -->
  <h1>Seção 1</h1>
<p>Tente rolar esta página e ver o menu de navegação enquanto rola!</p>
</div>
...

</body>

Experimente você mesmo

Exemplo de explicação data-bs-spy="scroll" Adicione ao elemento usado como área rolável (normalmente <body> elemento).

Em seguida, adicione data-bs-target A propriedade, cujo valor é id ou a classe do menu de navegação (.navbar) Isso é para garantir que o menu de navegação esteja conectado à área rolável.

Atenção, o elemento rolável deve coincidir com o ID do link dentro da lista do menu de navegação (<div id="section1"> Correspondência <a href="#section1">)

Opcional data-bs-offset A propriedade define o número de pixels de deslocamento do topo na hora de calcular a posição de rolagem. Isso é útil quando os links no menu de navegação saltam para elementos roláveis e você sente que a mudança de estado ativo ocorreu cedo. O valor padrão é 10 pixels.

Precisa de alinhamento relativoElementos com data-bs-spy="scroll" precisam de CSS Posição O valor da propriedade deve ser 'relative' para funcionar corretamente.