- En Bootstrap 3 , es posible configurar el desplazamiento de arranque hasta la parte inferior de la barra lateral adhesiva larga usando Affix , que es manejado por el «complemento Affix jQuery» .
- Desafortunadamente, en la migración de Bootstrap 4 , se eliminó el «complemento Affix jQuery» .
- Para lograr esta propiedad de afijo como Bootstrap 3 , Bootstrap 4 nos recomienda la propiedad CSS, es decir, position: sticky; directamente en estilo o posición de implementación: adhesivo; en la regla @supports .
- Aunque es posible que position:sticky no sea compatible en todos los casos, podemos adoptar la biblioteca ScrollPos-Styler de terceros.
Ejemplo 1: El siguiente ejemplo ilustra cómo configurar el desplazamiento de Bootstrap 4 hasta la parte inferior de la barra lateral de barra larga usando las propiedades css.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="
https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css
">
<script src="
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js
"></script>
<script src="
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js
"></script>
<script src="
https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js
"></script>
<link rel="stylesheet" href="
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
">
<style>
.sidebar {
top: 50px;
left: 0px;
position: sticky;
}
</style>
</head>
<body data-spy="scroll"
data-target="#myScrollspy"
data-offset="1">
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
<div class="container-fluid" id="body">
<div class="row">
<div class="col-sm-2 p-3 bg-secondary sidebar">
<div class="card text-center"
style="width:auto">
<span class="card-img-top fakeimg bg-info p-5"
src=""
alt="Card image"></span>
<div class="card-body ">
<h4 class="card-title">Sticky sidebar</h4>
<p class="card-text ">Bootstrap 4</p>
<a href=
"https://getbootstrap.com/docs/4.3/getting-started/introduction/"
class="btn btn-primary"
target="_blank">See Features</a>
</div>
</div>
<hr class="d-sm-none">
<form>
<input type="range"
class="custom-range"
id="customRange"
name="points1">
</form>
<hr class="d-sm-none">
</div>
<div class="col-sm-10 p-4">
<h1 class="text-success font-weight-bold text-center">
GeeksforGeeks</h1>
<br> Bootstrap is a free and open-source tool collection
for creating responsive websites and web applications.
It is the most popular HTML, CSS, and JavaScript framework
for developing responsive, mobile-first web sites.
Nowadays, the websites are perfect for all the browsers
(IE, Firefox and Chrome) and for all sizes of screens
(Desktop, Tablets, Phablets, and Phones).
All thanks to Bootstrap developers – Mark Otto and
Jacob Thornton of Twitter, though it was later declared
to be an open-source project.
<br>
<br> Bootstrap is a free and open-source tool collection
for creating responsive websites and web applications.
It is the most popular HTML, CSS, and JavaScript framework
for developing responsive, mobile-first web sites.
It solves many problems which we had once, one of which is
the cross-browser compatibility issue. Nowadays, the websites
are perfect for all the browsers (IE, Firefox and Chrome) and
for all sizes of screens (Desktop, Tablets, Phablets, and Phones).
All thanks to Bootstrap developers -Mark Otto and Jacob Thornton
of Twitter, though it was later declared to be an open-source project.
<br>
<br> Why Bootstrap?
<br>
<br>
<ul>
<li>Faster and Easier Web-Development.</li>
<li>It creates Platform-independent web-pages.</li>
<li>It creates Responsive Web-pages.</li>
<li>It designed to be responsive to mobile devices too.</li>
<li>It is Free! Available on www.getbootstrap.com</li>
</ul>
How to use Bootstrap 4 in webpage:
There are two ways to include Bootstrap in the website.
</div>
</div>
</div>
</body>
<script>
$(document).ready(function() {
$("#filter").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#body *").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
</html>
Salida: 
Referencia https://getbootstrap.com/docs/4.3/migration/#components
Publicación traducida automáticamente
Artículo escrito por VigneshKannan3 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA