Scrollspy Bootstrap 5

Scrollspy

Scrollspy se utiliza paraDesplazamientoLa lista de enlaces en la navegación automática se actualiza.

Cómo crear Scrollspy

El siguiente ejemplo muestra cómo crear Scrollspy:

Ejemplo

<!-- Área desplazable -->
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="50">
<!-- Navegación - Los elementos <a> se utilizan para saltar a alguna sección de la área desplazable -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
  <ul class="navbar-nav">
    <li><a href="#section1">Sección 1</a></li>
    ...
</nav>
<!-- Sección 1 -->
<div id="section1">
  <h1>Sección 1</h1>
  <p>Intente desplazarse por esta página y ver la barra de navegación mientras lo hace!</p>
</div>
...
</body>

Prueba personalmente

Ejemplo de explicación

Asigna data-bs-spy="scroll" Agregue a los elementos que se utilizan como áreas desplazables (generalmente <body> elemento).

Luego agrega data-bs-target La propiedad, cuyo valor es id o el nombre de la clase de la barra de navegación (.navbar). Esto es para asegurar que la barra de navegación esté conectada con el área desplazable.

Por favor, tenga en cuenta que los elementos desplazables deben coincidir con el ID de los enlaces dentro de la lista de navegación (<div id="section1"> Coincidencia <a href="#section1">)

Opcional data-bs-offset La propiedad especifica la cantidad de píxeles de desplazamiento desde el borde superior al calcular la posición de desplazamiento. Es útil cuando los enlaces en la barra de navegación saltan a elementos desplazables y sientes que cambian demasiado pronto el estado activo. El valor predeterminado es 10 píxeles.

Se requiere posicionamiento relativo: Los elementos con data-bs-spy="scroll" necesitan CSS Position El valor de la propiedad debe establecerse en "relative" para que funcione correctamente.