¡Hola gente bonita!👋
En el articulo anterior explique el posicionamiento fijo, en esta ocasión voy a explicar el posicionamiento sticky o también llamado (en español) pegajoso.
El posicionamiento sticky es relativamente mas nuevo que los otros tipos de posicionamiento y tal como dice la documentación de la MDN:
El posicionamiento sticky puede considerarse un híbrido de los posicionamientos relativo y fijo. Un elemento con posicionamiento sticky es tratado como un elemento posicionado relativamente hasta que cruza un umbral especificado, en cuyo punto se trata como fijo hasta que alcanza el límite de su padre.
Son muy similares, pero hay algunas diferencias importantes.
Este tipo de posicionamiento se utiliza cuando queremos que un elemento se posicione en un lugar especifico y que cuando lleguemos a ese elemento al hacer scroll, se quede de forma fija.
↕️↔️ top, right, bottom, left
Las coordenadas no se usan para mover el elemento (como en los otros tipos de posicionamiento), si no que se usan para indicar en que punto el elemento tendrá un comportamiento diferente, antes de llegar a ese punto el elemento se va a comportar de manera natural.
Ejemplo 1️⃣
El ejemplo mas común es tener un slider o imagen en la parte superior y un menú de navegación debajo. Cuando hagamos scroll y lleguemos al menú, este se quedara fijo en la pagina.
<div class="slider">SCROLL TO THE BOTTOM</div>
<nav class="nav">
<ul>
<li>Home</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
<div class="container">
<article>
<h2 class="title">Lorem ipsum dolor sit amet.</h2>
<p> lorem.. </p>
</article>
</div>
.slider {
height: 300px;
font-size: 4rem;
font-weight: bold;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
background-color: yellow;
}
.nav {
position: sticky; ⬅️
top: 0; ⬅️
height: 50px;
padding: 0.5em;
background-color: #ccc;
}
.nav ul {
margin-top: 0;
margin-bottom: 0;
padding-left: 0;
list-style-type: none;
display: flex;
justify-content: space-around;
}
.nav ul li {
line-height: 2;
}
.container {
width: 70%;
max-width: 600px;
margin: 0 auto;
}
article {
padding: 2em;
line-height: 1.6;
}
Como puedes observar, en el código CSS agregué la declaración top: 0 esto significa que cuando el menú de navegación <nav></nav> tenga 0px se mantendrá fijo al límite superior de la ventana del navegador, similar a la posición fixed.
Sin embargo, el elemento es desplazado con relación a su ancestro más cercano o su bloque contenedor. Por ejemplo, si el menú de navegación <nav></nav> se encuentra dentro de un contenedor padre (usaremos de ejemplo la etiqueta <header></header>) no tendrá ningún efecto a menos que se especifique la altura al elemento padre.
<div class="slider">SCROLL TO THE BOTTOM</div>
<header class="header">
<nav class="nav">
<ul>
<li>Home</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</header>
.header {
height: 500px; ⬅️
background-color: #ccc;
}
.nav {
position: sticky; ⬅️
top: 0; ⬅️
height: 50px;
padding: 0.5em;
}
Como podemos observar el menu va a estar colocado en la parte superior del viewport mientras hagamos scroll y una vez terminemos de recorrer los 200px de altura del header, el menú de navegación deja de estar fijo. Esta es la diferencia con el posicionamiento fixed. Con posicionamiento sticky lo que esta tomando como referencia es el alto del contenedor padre (header), si no declaramos un alto al header no va a funcionar.
Ejemplo 2️⃣
Otro uso común del posicionamiento sticky es para los encabezados en una lista alfabética. En este ejemplo el encabezado "B" aparecerá justo por debajo de los ítems que comienzan con "A". El encabezado "B" se mantendrá fijado al límite superior del viewport hasta que todos los ítems "B" se hayan desplazado fuera de la pantalla, en cuyo punto será cubierto por el encabezado "C", y así sucesivamente.
<h1 class="title">Lengujes de programación</h1>
<dl class="list">
<div class="list-group">
<dt class="list-header">A</dt>
<dd>Ada</dd>
<dd>ActionScript</dd>
<dd>ALGOL 68</dd>
<dd>ASP.NET</dd>
<dd>Assembly language</dd>
</div>
<div class="list-group">
<dt class="list-header">B</dt>
<dd>Bash</dd>
<dd>BASIC</dd>
<dd>Batch (Windows/Dos)</dd>
<dd>Babbage</dd>
<dd>BuildProfessional</dd>
</div>
<div class="list-group">
<dt class="list-header">C</dt>
<dd>C#</dd>
<dd>Clojure</dd>
</div>
</dl>
html {
height: 300%;
}
.title {
text-align: center;
}
.list {
padding: 20px;
}
.list-group {
padding: 0 20px;
}
.list-header {
position: sticky; ⬅️
top: 0; ⬅️
padding: 10px;
font-weight: 10px;
background-color: #333;
color: #00ff6c;
}
dd {
font: bold 20px/45px Helvetica, Arial, sans-serif;
margin: 0;
padding: 0 0 0 12px;
white-space: nowrap;
}
dd + dd {
border-top: 1px solid #ccc;
}
El elemento <dt class="list-header"></dt> se va a quedar fijo en la parte superior siempre que el alto de su contenedor <div class="list-group"></div> tenga contenido.
Si quieres ver mas ejemplos, puedes consultar el articulo de CSS-Tricks: Creating sliding effects using sticky positioning.
📋 Conclusión
☑️ Al posicionar el elemento como sticky se habilitan las propiedades top, right, bottom y left, pero no se usan para mover el elemento, si no para indicar en que punto el elemento estara fijo.
☑️ El elemento es posicionado de acuerdo al flujo normal del documento.
☑️ Las dimensiones del elemento se adaptan al contenido, excepto que se haya definido su tamaño con width o height.
🔎Recursos:
Gracias por leer🦸🏻♀️
Mis redes sociales donde comparto notas de código:
▶️Youtube
📷Instagram
🐦Twitter
🔵Facebook
🔲Codepen
✍️Medium
🎵Tik Tok
Top comments (9)
Hola Lupita 👋
Enhorabuena por esta estupendísima guía sobre posicionamiento CSS 🙌 me lo guardo para leerlo posteriormente porque me han parecido muy buenos.
Gracias por compartir tanta sabiduría 😃🙋♂️
Gracias a usted por tomarse el tiempo de comentar, espero que le sea de ayuda esta serie de artículos, o le aporte mas a su conocimiento. Muchas gracias :)
Hola lupita muy buen articulo ahora entiendo que van en relacion al padre y no a viewport me quedo una sola duda y es cuando usaste la lista esto al usar anclas para navegar al estar todos apilados como hago para que la navegacion funcione correctamente, al salir de su posicion original no redirige correctamente
Muy buena guía, concisa y clara, y hasta con ejemplos. Genial!!
Muchas gracias por su comentario! :)
La lectura para despejar la mente. Muy buen post! Aplicaré estas prácticas!
Muchas gracias, espero sea de ayuda!! :)
Muchas gracias. Justo ayer me preguntaba cómo se hacía ese efecto de hacer scroll y que el navbar se quedara fijo. Estos post han sido de mucha ayuda.
Gracias Víctor