JS Scrollspy (scrollspy.js)
El plug-in Scrollspy se utiliza para actualizar automáticamente los enlaces en una lista de navegación basada en la posición de desplazamiento.
Para ver un tutorial sobre Scrollspy, lea nuestra Scrollspy Tutorial Bootstrap .
Consejo: El plug-in Scrollspy se utiliza a menudo junto con el afijo plugin.
Via data-* Atributos
Añadir data-spy="scroll" para el elemento que se debe utilizar como el área de desplazamiento (a menudo este es el <body> elemento).
A continuación, añadir la data-target atributo con un valor de la identificación o el nombre de clase de la barra de navegación ( .navbar ). Esto es para asegurarse de que la navbar está conectado con el área de desplazamiento.
Tenga en cuenta que los elementos desplazables deben coincidir con el ID de los enlaces dentro de los elementos de lista de la barra de navegación ( <div id="section1"> coincide <a href="#section1"> ).
El sistema opcional data-offset atributo especifica el número de píxeles para desplazar de arriba en el cálculo de la posición de desplazamiento. Esto es útil cuando se siente que los enlaces dentro de la barra de navegación cambia el estado activo demasiado pronto o demasiado pronto cuando se dirija a los elementos desplazables. Por defecto es de 10 píxeles.
Requiere posicionamiento relativo: El elemento con data-spy="scroll" requiere que el CSS position propiedad, con un valor de "relative" para que funcione 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-inverse navbar-fixed-top">
...
<ul class="nav
navbar-nav">
<li><a href="#section1">Section 1</a></li>
...
</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>
Inténtalo tú mismo " a través de JavaScript
Habilitar manualmente con:
Opciones Scrollspy
Las opciones pueden ser transmitidos a través de los atributos de datos o JavaScript. Para los atributos, al añadir el nombre de opción de de datos, como en la técnica de offset = "".
| Nombre | Tipo | Defecto | Descripción | Intentalo |
|---|---|---|---|---|
| offset | number | 10 | Especifica el número de píxeles para desplazar de arriba en el cálculo de la posición de desplazamiento | Intentalo |
Métodos Scrollspy
La siguiente tabla muestra todos los métodos disponibles scrollspy.
| Método | Descripción | Intentalo |
|---|---|---|
| .scrollspy("refresh") | Al añadir y eliminar elementos de la scrollspy, este método se puede utilizar para actualizar el documento | Intentalo |
Eventos Scrollspy
En la siguiente tabla se enumeran los eventos scrollspy todos disponibles.
| Evento | Descripción | Intentalo |
|---|---|---|
| activate.bs.scrollspy | Se produce cuando un nuevo elemento se activa por el scrollspy | Intentalo |
Ejemplos
Scrollspy con el desfile de animación
Cómo añadir un desplazamiento suave página a un ancla en la misma página:
desplazamiento suave
// Add scrollspy to <body>
$('body').scrollspy({target: ".navbar",
offset: 50});
// Add smooth scrolling to all links inside a navbar
$("#myNavbar a").on('click', function(event){
//
Prevent default anchor click behavior
event.preventDefault();
// Store hash (#)
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
//
The optional number (800) specifies the number of milliseconds it takes to scroll to
the specified area (the speed of the animation)
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
}); Inténtalo tú mismo " Scrollspy y Affix
Utilizando el afijo plug-in junto con el plugin Scrollspy:
Menú horizontal (barra de navegación)
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav
class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
...
</nav>
</body> Inténtalo tú mismo " Menú vertical (Sidenav)
<body data-spy="scroll" data-target="#myScrollspy" data-offset="15">
<nav class="col-sm-3" id="myScrollspy">
<ul class="nav nav-pills
nav-stacked" data-spy="affix" data-offset-top="205">
...
</nav>
</body> Inténtalo tú mismo "