72 - Componente : Scrollspy
Bootstrap 5 nos provee la posibilidad que según en que parte de la página nos encontremos se ilumine la opción de dicha sección.
Se requiere para su funcionamiento tener importada la librería de Javascript.
Problema
Implementaremos una página que tenga un menú de navegación fijo en la parte superior de la página con los enlaces "card", "form" y "accordion". Cuando se presione alguno de los hipervínculos saltaremos a la sección que muestra un ejemplo de dicha componente.
<!doctype html>
<html>
<head>
<title>Prueba de Bootstrap 5</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
</head>
<body data-spy="scroll">
<div class="container-fluid">
<nav id="menu1" class="navbar navbar-expand-sm navbar-dark bg-dark fixed-top">
<!-- enlaces -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#seccion1">card</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#seccion2">form</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#seccion3">accordion</a>
</li>
</ul>
</nav>
<!-- Seccion 1 -->
<div id="seccion1" style="min-height:100vh; padding-top:70px">
<h1>Prueba de tarjetas</h1>
<div class="row">
<div class="col-md">
<div class="card">
<img class="card-img-top" src="https://www.tutorialesprogramacionya.com/imagenes/cuadro1.jpg">
<div class="card-body">
<h4 class="card-title">Titulo de la tarjeta 1</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lectus sem,
tempor vitae mattis malesuada, ornare sed erat. Pellentesque nulla dui, congue
nec tortor sit amet, maximus mattis dui. </p>
<a href="#" class="btn btn-primary">Entrar</a>
</div>
</div>
</div>
<div class="col-md">
<div class="card">
<div class="card-body">
<h4 class="card-title">Titulo de la tarjeta 2</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam lectus sem,
tempor vitae mattis malesuada, ornare sed erat. Pellentesque nulla dui, congue
nec tortor sit amet, maximus mattis dui. </p>
<a href="#" class="btn btn-primary">Entrar</a>
</div>
<img class="card-img-bottom" src="https://www.tutorialesprogramacionya.com/imagenes/cuadro2.jpg">
</div>
</div>
</div>
</div>
<!-- Seccion 2 -->
<div id="seccion2" style="min-height:100vh; padding-top:70px">
<h1>Contacto</h1>
<form>
<div class="mb-3">
<label for="nombre" class="form-label">Ingrese su nombre:</label>
<input type="text" class="form-control" id="nombre" name="nombre">
</div>
<div class="mb-3">
<label for="clave" class="form-label">Ingrese su clave:</label>
<input type="password" class="form-control" id="clave" name="clave">
</div>
<button type="submit" class="btn btn-primary">Confirmar</button>
</form>
</div>
<!-- Seccion 3 -->
<div id="seccion3" style="min-height:100vh; padding-top:70px">
<h1>Prueba de accordion</h1>
<div id="accordion1">
<div class="accordion-item">
<div class="accordion-header" id="cabecera1">
<h5 class="mb-0">
<button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#respuesta1"
aria-expanded="true" aria-controls="respuesta1">
Pregunta frecuente 1
</button>
</h5>
</div>
<div id="respuesta1" class="accordion-collapse collapse show" aria-labelledby="cabecera1"
data-bs-parent="#accordion1">
<div class="accordion-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header" id="cabecera2">
<h5 class="mb-0">
<button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#respuesta2"
aria-expanded="true" aria-controls="respuesta2">
Pregunta frecuente 2
</button>
</h5>
</div>
<div id="respuesta2" class="accordion-collapse collapse" aria-labelledby="cabecera2"
data-bs-parent="#accordion1">
<div class="accordion-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</div>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header" id="cabecera3">
<h5 class="mb-0">
<button class="accordion-button" data-bs-toggle="collapse" data-bs-target="#respuesta3"
aria-expanded="true" aria-controls="respuesta3">
Pregunta frecuente 3
</button>
</h5>
</div>
<div id="respuesta3" class="accordion-collapse collapse" aria-labelledby="cabecera3"
data-bs-parent="#accordion1">
<div class="accordion-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8"
crossorigin="anonymous"></script>
</body>
</html>
Todo el contenido está en la misma página y lo que hacemos con los enlaces es desplazarnos hasta la sección respectiva.
Si seleccionamos la primer opción:
Luego cuando seleccionamos la segunda opción:
Y cuando seleccionamos la tercer opción se desplaza y aparece:
Si nos desplazamos con la barra de scroll veremos que según en que sección estamos la opción del menú se activa.
Cada sección tiene que definir una propiedad id con el mismo valor que almacenamos en la propiedad href del menú:
<div id="seccion1" style="min-height:100vh; padding-top:70px">
El padding-top lo definimos ya que el menú es fijo y evitamos que datos de la sección no se muestren. Con la propiedad min-height con el valor 100vh estamos indicando que en la pantalla solo se muestre este div (es decir que ocupe el 100% el alto del dispositivo) y no otro que se encuentre más abajo.
Para que funcione esta componente debemos iniciar la propiedad data-bs-spy con el valor "scroll":
<body data-bs-spy="scroll">