Scrollspy se usa para actualizar automáticamente enlaces en una lista de navegación basada en la posición de desplazamiento.
Como crear un Scrollspy
El siguiente ejm muestra como crear un Scrollspy.
Ejm
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
<ul class="navbar-nav">
<li><a href="#section1">Section 1</a></li>
...
</nav>
<div id="section1">
<h1>Section 1</h1>
<p>Try to scroll this page and look at the navigation bar while scrolling!</p>
</div>
...
</body>
Ejm explicado
Agrega data-spy = «scroll» al elemento que debe usarse como área desplazable (a menudo, este es el elemento <body>).
Luego agregue el atributo de destino de datos 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 de desplazamiento de datos especifica el número de píxeles para compensar desde la parte superior al calcular la posición del desplazamiento. Esto es útil cuando siente 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.
Menú vertical
En este ejemplo, usamos las píldoras de navegación vertical de Bootstrap como menú.
Ejm
<body data-spy="scroll" data-target="#myScrollspy" data-offset="1">
<div class="container-fluid">
<div class="row">
<nav class="col-sm-3 col-4" id="myScrollspy">
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="#section1">Section 1</a>
</li>
...
</ul>
</nav>
<div class="col-sm-9 col-8">
<div id="section1">
<h1>Section 1</h1>
<p>Try to scroll this page and look at the menu while scrolling!</p>
</div>
...
</div>
</div>
</div>
</body>