DEV Community

Lupita Code 🌄
Lupita Code 🌄

Posted on

Guía completa y práctica sobre posicionamiento CSS: position sticky

¡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>
Enter fullscreen mode Exit fullscreen mode
.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;
}

Enter fullscreen mode Exit fullscreen mode

Alt Text

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>
Enter fullscreen mode Exit fullscreen mode
 .header {
    height: 500px; ⬅️
    background-color: #ccc;
}

.nav {
    position: sticky; ⬅️
    top: 0; ⬅️
    height: 50px;
    padding: 0.5em;
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

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>
Enter fullscreen mode Exit fullscreen mode
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;
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

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

Latest comments (9)

Collapse
 
jeancarlosr17 profile image
Jean carlos recio

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

Collapse
 
io31416 profile image
Víctor Izquierdo

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.

Collapse
 
lupitacode profile image
Lupita Code 🌄

Gracias Víctor

Collapse
 
hugoscoms profile image
HugosComs

Muy buena guía, concisa y clara, y hasta con ejemplos. Genial!!

Collapse
 
lupitacode profile image
Lupita Code 🌄

Muchas gracias por su comentario! :)

Collapse
 
menchadev profile image
Andrés Menchaca

La lectura para despejar la mente. Muy buen post! Aplicaré estas prácticas!

Collapse
 
lupitacode profile image
Lupita Code 🌄

Muchas gracias, espero sea de ayuda!! :)

Collapse
 
sturpin profile image
Sergio Turpín

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 😃🙋‍♂️

Collapse
 
lupitacode profile image
Lupita Code 🌄

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 :)