Guía completa y práctica sobre posicionamiento en CSS (5 Part Series)

¡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