Hemos visitado muchos sitios web donde las barras de navegación se actualizan automáticamente a medida que el usuario se desplaza hacia abajo en la página web. Scrollspy funciona según la posición de desplazamiento o la posición en la que el usuario está viendo actualmente. Bootstrap scrollspy apunta al contenido de la barra de navegación automáticamente al desplazarse por el área. En este artículo veremos cómo implementar el scrollspy en Bootstrap. Implementaremos el scrollspy de 2 maneras:
- Espía de desplazamiento horizontal
- Desplazamiento vertical
Necesitamos importar las bibliotecas CDN de Bootstrap para usar la funcionalidad scrollspy. Incluiremos las bibliotecas del sitio web oficial de Bootstrap. Hay algunos requisitos para que scrollspy funcione correctamente:
- Es necesario incluir el componente de navegación Bootstrap o el grupo de lista.
- Requerir posición: relativa: en el elemento para el que se aplica el espionaje, generalmente en la etiqueta del cuerpo.
- Se requiere la etiqueta <a> que debe apuntar a un elemento con esa identificación.
Implementando scrollspy horizontal: Crearemos una barra de navegación usando una etiqueta de navegación en nuestro cuerpo. La barra de navegación contendrá tres elementos. Usaremos la clase de contenedor que tiene el encabezado y un texto ficticio , que proporcionará un relleno superior para garantizar que la barra de navegación y el contenedor no se superpongan entre sí. La barra de navegación debe fijarse en la parte superior para que el scrollspy funcione correctamente.
Se agregan algunos atributos con los elementos para la implementación de esta característica a la etiqueta del cuerpo.
<body style="position:relative" data-spy="scroll"
data-target=".navbar" data-offset="50">
Valores de atributos:
- data-spy: Se utiliza para espiar la posición actual en la que se desplaza el usuario.
- objetivo de datos: este atributo se utiliza para conectar la barra de navegación con el área desplazable.
- desplazamiento de datos: este atributo especifica el número de píxeles que se desplazarán desde la parte superior al calcular la posición de desplazamiento.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
</script>
<style>
.container {
height: 500px;
padding-top: 50px;
}
#java {
background: lightblue;
}
#cpp {
background: lightgreen;
}
#dsa {
background: #ffcc66;
}
</style>
</head>
<body style="position: relative" data-spy="scroll"
data-target=".navbar" data-offset="50">
<nav class="navbar navbar-expand-lg
navbar-inverse navbar-fixed-top">
<a href="#" class="navbar-brand">
GeeksforGeeks
</a>
<ul class="nav nav-pills">
<li class="nav-item"><a class="nav-link"
href="#java">Java</a></li>
<li class="nav-item"><a class="nav-link"
href="#cpp">C++</a></li>
<li class="nav-item"><a class="nav-link"
href="#dsa">DSA</a></li>
</ul>
</nav>
<div id="java" class="container container-fluid">
<h4>Java</h4>
<p>
Java is a OOP programming language and
GeeksforGeeks has great articles
on it.
</p>
</div>
<div id="cpp" class="container container-fluid">
<h4>C++</h4>
<p>
C++ is a very popular programming language
used by many developers and
programmers around the world. It has
wide range of applications from
software to backend. I have learned
C++ mostly from GeeksforGeeks
because of the great content.
</p>
</div>
<div id="dsa" class="container container-fluid">
<h4>DSA</h4>
<p>
DSA or Data Structures and Algorithms are
the most important aspects of
programming and every good programmer
should know DSA for better and
efficient algorithms irrespective of
programming language. You can find
tons of lessons for DSA in GeeksforGeeks.
</p>
</div>
</body>
</html>
Producción:
Implementación de scrollspy vertical: Para Scrollspy vertical, necesitamos una barra de navegación vertical. Hemos envuelto nuestro contenido dentro de una fila para la vista vertical de nuestra barra de navegación.
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
</script>
<style>
body {
position: relative;
}
.navbar-brand {
position: fixed;
}
ul.nav-pills {
top: 40px;
position: fixed;
}
div.col-sm-9 div {
height: 500px;
}
#java {
background: lightblue;
}
#cpp {
background: lightgreen;
}
#dsa {
background: #ffcc66;
}
@media screen and (max-width: 810px) {
#java,
#cpp,
#dsa {
margin-left: 150px;
}
}
</style>
</head>
<body data-spy="scroll" data-target=".navbar"
data-offset="20">
<div class="container">
<div class="row">
<nav class="navbar col-sm-3">
<a class="navbar-brand">GeeksforGeeks</a>
<ul class="nav nav-pills nav-stacked">
<li class="nav-item">
<a class="nav-link" href="#java">Java</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#cpp">C++</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#dsa">DSA</a>
</li>
</ul>
</nav>
<div class="col-sm-9">
<div id="java">
<h4>Java</h4>
<p>
Java is a OOP programming language
and GeeksforGeeks has great
articles on it.
</p>
</div>
<div id="cpp">
<h4>C++</h4>
<p>
C++ is a very popular programming
language used by many developers
and programmers around the world.
It has wide range of applications
from software to backend. I have
learned C++ mostly from GeeksforGeeks
because of the great content."
</p>
</div>
<div id="dsa">
<h4>DSA</h4>
<p>
DSA or Data Structures and Algorithms are
the most important aspects of programming
and every good programmer should know DSA
for better and efficient algorithms irrespective
of programming language. You can find tons of
lessons for DSA in GeeksforGeeks.
</p>
</div>
</div>
</div>
</div>
</body>
</html>
Salida: proporcionamos un margen de 150 px si el ancho de la pantalla es inferior a 810 px.
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA