El complemento de afijo en bootstrap nos permite hacer que un elemento sea fijo o estable para una posición o área particular en la página web. Se usa principalmente con la barra de navegación para hacerla pegajosa o bloqueada en la parte superior de la página, de modo que si el usuario se desplaza hacia abajo en la página, la barra de navegación aún está visible para él y el usuario puede hacer clic en cualquier enlace de la barra de navegación.
Cómo usar el complemento Affix:
- Atributo data-spy: Agregue data-spy=”affix” al elemento que desea usar el complemento Affix.
- data-offset-top|bottom: agregue este atributo para obtener la posición del desplazamiento.
Sintaxis:
<nav data-spy="affix" data-offset-bottom="250">
//content of the element
</nav>
Cómo funciona el complemento Affix:
- El complemento Affix consta principalmente de tres clases: .affix, .affix-top, .affix-bottom.
- .affix-top: la clase affix-top se usa para especificar la posición inicial del elemento en la parte superior de la página, luego, si el usuario comienza a desplazarse hacia abajo en la página, la clase .affix- top se reemplaza por la clase .affix que hace que el elemento quede fijo o bloqueado en su posición inicial. La clase .affix usa la propiedad position: fixed de CSS para hacer que el elemento se fije en su posición.
- .affix-bottom : la clase .affix-bottom se usa para especificar la posición inicial del elemento en la parte inferior de la página, luego se reemplaza por la clase .affix si el usuario se desplaza hacia abajo en la página y el elemento se arreglará en la posición inicial dada.
Ejemplo 1: En este ejemplo, arreglaremos la barra de navegación usando el complemento de afijos.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Affix plugin</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<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.6.0/jquery.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
</script>
<style>
.affix {
top: 0;
width: 100%;
z-index: 9999 !important;
}
.affix+.container-fluid {
padding-top: 70px;
}
</style>
</head>
<body>
<div class="container-fluid"
style="background-color:#24e724;color:#fff;height:200px;">
<h1>GeeksforGeeks</h1>
<h3>Hey Geek, Welcome to GFG!</h3>
<h4>A computer science portal for all geeks.</h4>
<h4>
GeeksforGeeks is an online learning
platform for all geeks around the globe.
</h4>
</div>
<nav class="navbar navbar-inverse" data-spy="affix"
data-offset-top="197">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Practice</a></li>
<li><a href="#">Courses</a></li>
<li><a href="#">Jobs</a></li>
<li><a href="#">Events</a></li>
</ul>
</nav>
<div class="container-fluid" style="height:100vh">
<h2>GeeksforGeeks</h2>
<h2>GeeksforGeeks</h2>
<h2>GeeksforGeeks</h2>
<h2>GeeksforGeeks</h2>
<h2>GeeksforGeeks</h2>
<h2>GeeksforGeeks</h2>
<h2>GeeksforGeeks</h2>
<h2>GeeksforGeeks</h2>
<h2>GeeksforGeeks</h2>
<h2>GeeksforGeeks</h2>
<h2>GeeksforGeeks</h2>
<h2>GeeksforGeeks</h2>
<h2>GeeksforGeeks</h2>
<h2>GeeksforGeeks</h2>
<h2>GeeksforGeeks</h2>
</div>
</body>
</html>
Producción:
Ejemplo 2: en este ejemplo, arreglaremos la barra de navegación receptiva usando el complemento de afijo.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Affix Plugin</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<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.6.0/jquery.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
</script>
<style>
.affix {
top: 20px;
z-index: 9999 !important;
}
</style>
</head>
<body>
<div class="container-fluid"
style="background-color:#24e724;color:#fff;height:200px;">
<h1>GeeksforGeeks</h1>
<h3>Hey Geek, Welcome to GFG!</h3>
<h4>A computer science portal for all geeks.</h4>
<h4>
GeeksforGeeks is an online learning
platform for all geeks around the globe.
</h4>
</div>
<div class="container">
<div class="row">
<nav class="col-sm-3">
<ul class="nav nav-pills nav-stacked"
data-spy="affix" data-offset-top="205">
<li style="background-color: #24e7c7;color:#fff;"
class="active">
<a href=" #section1">Vertical Fix 1</a>
</li>
<li style="background-color: #24e7c7;color:#fff;">
<a href="#section2">Vertical Fix 2</a>
</li>
<li style="background-color: #24e7c7;color:#fff;">
<a href=" #section3">Vertical Fix 3</a>
</li>
</ul>
</nav>
<div class="col-sm-9">
<h2>GeeksforGeeks</h2>
<h2>GeeksforGeeks</h2>
<h2>GeeksforGeeks</h2>
<h2>GeeksforGeeks</h2>
<h2>GeeksforGeeks</h2>
<h2>GeeksforGeeks</h2>
<h2>GeeksforGeeks</h2>
<h2>GeeksforGeeks</h2>
<h2>GeeksforGeeks</h2>
<h2>GeeksforGeeks</h2>
<h2>GeeksforGeeks</h2>
<h2>GeeksforGeeks</h2>
<h2>GeeksforGeeks</h2>
<h2>GeeksforGeeks</h2>
<h2>GeeksforGeeks</h2>
</div>
</div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por abhisheksainiaggarwal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA