1 diciembre, 2020
Div flotante en Bootstrap que sigue el scroll
Para crear un div flotante que siga el scroll podemos usar la clase sticky-top en una columna, veamos como implementarla en una página web.
Suscríbete a nuestro canal en Youtube
Suscríbirse¿Cómo crear un div flotante que sigue scroll en Bootstrap?
Antes pongamos en contexto lo siguiente:
En ocasiones un desarrollador frontend necesita diseñar una estructura HTML y CSS con una distribución que le permita tener un sector de su sitio siempre visible, generalmente es un cuadro a la derecha o izquierda con información relevante al usuario. Bien este tutorial es para explicar como podemos lograr esta funcionalidade usando la librería CSS responsive Bootstrap en su versión 4.5.x
CÓDIGO HTML
Para ello creamos una página web con HTML con una estructura donde colocaremos un div container y un div row que englobe las demás capas, dentro distribuimos una capa para el menu, otra para el content y sidebar y finalmente una capa para el footer. y ¿Donde colocamos la capa flotante?, pues dentro de la capa sidebar en creamos una capa para el contenido del div flotante.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DIV FLOTANTE BOOTSTRAP</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
MENU
</div>
<div class="col-sm-8">
CONTENT
</div>
<div class="col-sm-4">
SIDEBAR
<div class="sticky-top">
DIV FLOTANTE
</div>
</div>
<div class="col-sm-12">
FOOTER
</div>
</div>
</div>
</body>
</html>
CÓDIGO HTML + CSS (APLICANDO BOOTSTRAP 4.5.X)
Veamos el código completo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DIV FLOTANTE BOOTSTRAP</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12 bg-info">
<h1 class="pt-5 pb-5">MENU</h1>
</div>
<div class="col-sm-8 bg-warning">
<h1>CONTENT</h1>
<h2>SUBTITULO</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Incidunt voluptatem modi ex cum aut, inventore cupiditate autem deleniti sunt nihil harum aspernatur temporibus vero quaerat architecto quos, a illo ut!</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Incidunt voluptatem modi ex cum aut, inventore cupiditate autem deleniti sunt nihil harum aspernatur temporibus vero quaerat architecto quos, a illo ut!</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Incidunt voluptatem modi ex cum aut, inventore cupiditate autem deleniti sunt nihil harum aspernatur temporibus vero quaerat architecto quos, a illo ut!</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Incidunt voluptatem modi ex cum aut, inventore cupiditate autem deleniti sunt nihil harum aspernatur temporibus vero quaerat architecto quos, a illo ut!</p>
<h2>SUBTITULO</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Incidunt voluptatem modi ex cum aut, inventore cupiditate autem deleniti sunt nihil harum aspernatur temporibus vero quaerat architecto quos, a illo ut!</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Incidunt voluptatem modi ex cum aut, inventore cupiditate autem deleniti sunt nihil harum aspernatur temporibus vero quaerat architecto quos, a illo ut!</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Incidunt voluptatem modi ex cum aut, inventore cupiditate autem deleniti sunt nihil harum aspernatur temporibus vero quaerat architecto quos, a illo ut!</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Incidunt voluptatem modi ex cum aut, inventore cupiditate autem deleniti sunt nihil harum aspernatur temporibus vero quaerat architecto quos, a illo ut!</p>
<h2>SUBTITULO</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Incidunt voluptatem modi ex cum aut, inventore cupiditate autem deleniti sunt nihil harum aspernatur temporibus vero quaerat architecto quos, a illo ut!</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Incidunt voluptatem modi ex cum aut, inventore cupiditate autem deleniti sunt nihil harum aspernatur temporibus vero quaerat architecto quos, a illo ut!</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Incidunt voluptatem modi ex cum aut, inventore cupiditate autem deleniti sunt nihil harum aspernatur temporibus vero quaerat architecto quos, a illo ut!</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Incidunt voluptatem modi ex cum aut, inventore cupiditate autem deleniti sunt nihil harum aspernatur temporibus vero quaerat architecto quos, a illo ut!</p>
<h2>SUBTITULO</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Incidunt voluptatem modi ex cum aut, inventore cupiditate autem deleniti sunt nihil harum aspernatur temporibus vero quaerat architecto quos, a illo ut!</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Incidunt voluptatem modi ex cum aut, inventore cupiditate autem deleniti sunt nihil harum aspernatur temporibus vero quaerat architecto quos, a illo ut!</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Incidunt voluptatem modi ex cum aut, inventore cupiditate autem deleniti sunt nihil harum aspernatur temporibus vero quaerat architecto quos, a illo ut!</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Incidunt voluptatem modi ex cum aut, inventore cupiditate autem deleniti sunt nihil harum aspernatur temporibus vero quaerat architecto quos, a illo ut!</p>
<h2>SUBTITULO</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Incidunt voluptatem modi ex cum aut, inventore cupiditate autem deleniti sunt nihil harum aspernatur temporibus vero quaerat architecto quos, a illo ut!</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Incidunt voluptatem modi ex cum aut, inventore cupiditate autem deleniti sunt nihil harum aspernatur temporibus vero quaerat architecto quos, a illo ut!</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Incidunt voluptatem modi ex cum aut, inventore cupiditate autem deleniti sunt nihil harum aspernatur temporibus vero quaerat architecto quos, a illo ut!</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Incidunt voluptatem modi ex cum aut, inventore cupiditate autem deleniti sunt nihil harum aspernatur temporibus vero quaerat architecto quos, a illo ut!</p>
<h2>SUBTITULO</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Incidunt voluptatem modi ex cum aut, inventore cupiditate autem deleniti sunt nihil harum aspernatur temporibus vero quaerat architecto quos, a illo ut!</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Incidunt voluptatem modi ex cum aut, inventore cupiditate autem deleniti sunt nihil harum aspernatur temporibus vero quaerat architecto quos, a illo ut!</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Incidunt voluptatem modi ex cum aut, inventore cupiditate autem deleniti sunt nihil harum aspernatur temporibus vero quaerat architecto quos, a illo ut!</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Incidunt voluptatem modi ex cum aut, inventore cupiditate autem deleniti sunt nihil harum aspernatur temporibus vero quaerat architecto quos, a illo ut!</p>
<h2>SUBTITULO</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Incidunt voluptatem modi ex cum aut, inventore cupiditate autem deleniti sunt nihil harum aspernatur temporibus vero quaerat architecto quos, a illo ut!</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Incidunt voluptatem modi ex cum aut, inventore cupiditate autem deleniti sunt nihil harum aspernatur temporibus vero quaerat architecto quos, a illo ut!</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Incidunt voluptatem modi ex cum aut, inventore cupiditate autem deleniti sunt nihil harum aspernatur temporibus vero quaerat architecto quos, a illo ut!</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Incidunt voluptatem modi ex cum aut, inventore cupiditate autem deleniti sunt nihil harum aspernatur temporibus vero quaerat architecto quos, a illo ut!</p>
</div>
<div class="col-sm-4 bg-success">
<div class="sticky-top">
<div class="card">
<div class="card-body">
<H1>div flotante</H1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat excepturi qui voluptatibus, possimus dolore sapiente sit dolor maxime natus ullam neque saepe asperiores maiores magni voluptatem nulla ut suscipit quis.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto perferendis dolorum blanditiis corrupti minus tempore impedit, qui, quae quam odit, porro neque modi itaque a vel voluptatum omnis. Voluptates, numquam!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, neque ad! Molestias repellat dignissimos adipisci magni tempora, reprehenderit nam quia nemo, in ipsa aliquid, saepe eius quidem laboriosam animi libero!
</p>
</div>
</div>
</div>
</div>
<div class="col-sm-12 bg-info">
<div class="vh-100">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam cupiditate, nisi temporibus aperiam odio enim excepturi saepe rem laboriosam expedita quod nobis tenetur tempore veniam, quaerat asperiores eligendi, hic assumenda.
</div>
</div>
<div class="col-sm-12 bg-dark">
<h1 class="pt-5 pb-5">FOOTER</h1>
</div>
</div>
</div>
</body>
</html>
Finalmente teenemos una funcionalidad que puede ser muy bien aprovechada en una página web. Hasta un próximo tutorial sobre desarrollo frontend con Bootstrap
Leido 5488 veces
