Bootstrap JS Scrollspy

JS Scrollspy

Scrollspy se usa para actualizar automáticamente enlaces en una lista de navegación basada en la posición de desplazamiento.

Atributos vía data-*

Agrega data-spy=»scroll» al elemento que debe usarse como área desplazable (a menudo, este es el elemento <body>).

Luego agrega el atributo data-target  con un valor de id o el nombre de clase de la barra de navegación (.navbar). Esto es para asegurarse de que la barra de navegación esté conectada con el área desplazable.

Ten en cuenta que los elementos desplazables deben coincidir con el ID de los enlaces dentro de los elementos de la lista de la barra de navegación (<div id = «section1»> coincide con <a href=»#section1″>).

El atributo opcional data-offset especifica el número de píxeles para compensar desde la parte superior al calcular la posición del desplazamiento. Esto es útil cuando sientes que los enlaces dentro de la barra de navegación cambian el estado activo demasiado pronto o demasiado temprano al saltar a los elementos desplazables. El valor predeterminado es de 10 píxeles.

Requiere posicionamiento relativo: el elemento con data-spy = «scroll» requiere la propiedad de posición CSS, con un valor de «relativo» para funcionar correctamente.

Ejm

<!-- The scrollable area -->
<body data-spy="scroll" data-target=".navbar" data-offset="50">

<!-- The navbar - The <a> elements are used to jump to a section in the scrollable area -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top"> 
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#section1">Section 1</a>
    </li>
  ....
  </ul>
</nav>

<!-- Section 1 -->
<div id="section1">
  <h1>Section 1</h1>
  <p>Try to scroll this page and look at the navigation bar while scrolling!</p>
</div>
...

</body>

Via JavaScript

Habilitar manualmente con.

$('body').scrollspy({target: ".navbar"})

Opciones Scrollspy

Las opciones se pueden pasar a través de atributos de datos o JavaScript. Para los atributos de datos, agrega el nombre de la opción a data-, como en data-offset = «».

Nombre Tipo Por defecto Descripción
offset number 10 Especifica el número de píxeles para compensar desde la parte superior al calcular la posición del desplazamiento

Métodos Scrollspy

La siguiente tabla lista todos los posibles métodos scrollspy

Método Descripción
.scrollspy(«refresh») Al agregar y eliminar elementos de scrollspy, este método se puede usar para actualizar el documento
.scrollspy(«dispose») Destruye el scrollspy

Eventos Scrollspy

La siguiente tabla lista todos los posibles eventos scrollspy

Evento Descripción
activate.bs.scrollspy Ocurre cuando un nuevo elemento se activa por el scrollspy