El Scrollspy Plugin
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.
Cómo crear un Scrollspy
El siguiente ejemplo muestra cómo crear un scrollspy:
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 " ejemplo Explicación
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 barra de navegación 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.
Menú Scrollspy Vertical
En este ejemplo, se utiliza píldoras de navegación vertical de rutina de carga que en el menú:
Ejemplo
<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
<div class="container">
<div class="row">
<nav class="col-sm-3" id="myScrollspy">
<ul class="nav nav-pills nav-stacked">
<li><a href="#section1">Section 1</a></li>
...
</ul>
</nav>
<div
class="col-sm-9">
<div id="section1">
<h1>Section 1</h1>
<p>Try to
scroll this page and look at the navigation list while scrolling!</p>
</div>
...
</div>
</div>
</div>
</body> Inténtalo tú mismo " Completar Bootstrap Scrollspy Referencia
Para una referencia completa de todos los métodos y eventos scrollspy, vaya a nuestro Bootstrap JS Scrollspy de referencia .