Complemento Bootstrap Scrollspy (avanzado)
El complemento Scrollspy
El complemento Scrollspy se usa para actualizar automáticamente los enlaces en una lista de navegación según 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>
Ejemplo explicado
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.
Menú vertical Scrollspy
En este ejemplo, usamos las píldoras de navegación vertical de Bootstrap como 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>
Referencia completa de Bootstrap Scrollspy
Para obtener una referencia completa de todos los métodos y eventos de scrollspy, vaya a nuestra Referencia de Bootstrap JS Scrollspy .