Bootstrap JS Scrollspy
JS Scrollspy
Scrollspy se utiliza para actualizar automáticamente los enlaces en una lista de navegación según la posición de desplazamiento.
Para obtener un tutorial sobre Scrollspy, lea nuestro Tutorial de Bootstrap Scrollspy .
A través de datos-* Atributos
Agregue data-spy="scroll"al elemento que debe usarse como área desplazable (a menudo, este es el <body>elemento).
Luego agregue el data-targetatributo 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.
Tenga 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">coincidencias <a href="#section1">).
El atributo opcional data-offsetespecifica el número de píxeles que se desplazan desde la parte superior al calcular la posición de desplazamiento. Esto es útil cuando siente que los enlaces dentro de la barra de navegación cambian el estado activo demasiado pronto o demasiado pronto al saltar a los elementos desplazables. El valor predeterminado es 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.
Ejemplo
<!-- 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>
A través de JavaScript
Habilitar manualmente con:
Ejemplo
$('body').scrollspy({target: ".navbar"})
Opciones de scrollspy
Las opciones se pueden pasar a través de atributos de datos o JavaScript. Para los atributos de datos, agregue el nombre de la opción a data-, como en data-offset="".
| Name | Type | Default | Description | Try it |
|---|---|---|---|---|
| offset | number | 10 | Specifies the number of pixels to offset from top when calculating the position of scroll |
Métodos de scrollspy
La siguiente tabla enumera todos los métodos scrollspy disponibles.
| Method | Description |
|---|---|
| .scrollspy("refresh") | When adding and removing elements from the scrollspy, this method can be used to refresh the document |
| .scrollspy("dispose") | Destroys the scrollspy |
Eventos Scrollspy
La siguiente tabla enumera todos los eventos scrollspy disponibles.
| Event | Description |
|---|---|
| activate.bs.scrollspy | Occurs when a new item becomes activated by the scrollspy |