Espião de rolagem

Atualize automaticamente a navegação do Bootstrap ou os componentes do grupo de lista com base na posição de rolagem para indicar qual link está atualmente ativo na viewport.

Nesta página

Como funciona

Scrollspy alterna a .activeclasse em elementos âncora ( <a>) quando o elemento com o idreferenciado pela âncora hrefé rolado para a visualização. Scrollspy é melhor usado em conjunto com um componente de navegação Bootstrap ou grupo de lista , mas também funcionará com qualquer elemento âncora na página atual. Aqui está como funciona.

Para começar, o scrollspy requer duas coisas: uma navegação, um grupo de listas ou um simples conjunto de links, além de um contêiner rolável. O contêiner rolável pode ser o <body>ou um elemento personalizado com um conjunto heighte overflow-y: scroll.
No contêiner rolável, adicione data-bs-spy="scroll"e data-bs-target="#navId"onde navIdé o exclusivo idda navegação associada. Certifique-se de incluir também um tabindex="0"para garantir o acesso ao teclado.
À medida que você rola o contêiner “espionado”, uma .activeclasse é adicionada e removida dos links de âncora na navegação associada. Os links devem ter iddestinos resolvíveis, caso contrário, eles serão ignorados. Por exemplo, a <a href="#home">home</a>deve corresponder a algo no DOM como<div id="home"></div>
Elementos de destino que não são visíveis serão ignorados. Consulte a seção Elementos não visíveis abaixo.

Exemplos

Role a área abaixo da barra de navegação e observe a mudança de classe ativa. Abra o menu suspenso e observe os itens suspensos serem destacados também.

Primeiro título

Este é um conteúdo de espaço reservado para a página do scrollspy. Observe que, à medida que você rola a página, o link de navegação apropriado é realçado. É repetido em todo o exemplo do componente. Continuamos adicionando mais alguns exemplos de cópia aqui para enfatizar a rolagem e o realce.

Segundo título

Terceiro título

Quarto título

Quinto título

<nav id="navbar-example2" class="navbar bg-light px-3 mb-3">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#scrollspyHeading1">First</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#scrollspyHeading2">Second</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#scrollspyHeading3">Third</a></li>
        <li><a class="dropdown-item" href="#scrollspyHeading4">Fourth</a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#scrollspyHeading5">Fifth</a></li>
      </ul>
    </li>
  </ul>
</nav>
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" class="scrollspy-example bg-light p-3 rounded-2" tabindex="0">
  <h4 id="scrollspyHeading1">First heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading2">Second heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading3">Third heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading4">Fourth heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading5">Fifth heading</h4>
  <p>...</p>
</div>

Navegação aninhada

Scrollspy também funciona com .navs aninhados. Se um aninhado .navfor .active, seus pais também serão .active. Role a área ao lado da barra de navegação e observe a mudança de classe ativa.