Gua completa y prctica sobre posicionamiento CSS: position sticky

Hola gente bonita!

En el articulo anterior explique el posicionamiento fijo, en esta ocasin voy a explicar el posicionamiento sticky o tambin llamado (en espaol) pegajoso.

El posicionamiento sticky es relativamente mas nuevo que los otros tipos de posicionamiento y tal como dice la documentacin de la MDN:

El posicionamiento sticky puede considerarse un hbrido 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 lmite 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 comn es tener un slider o imagen en la parte superior y un men de navegacin 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 cdigo CSS agregu la declaracin top: 0 esto significa que cuando el men de navegacin <nav></nav> tenga 0px se mantendr fijo al lmite superior de la ventana del navegador, similar a la posicin fixed.

Sin embargo, el elemento es desplazado con relacin a su ancestro ms cercano o su bloque contenedor. Por ejemplo, si el men de navegacin <nav></nav> se encuentra dentro de un contenedor padre (usaremos de ejemplo la etiqueta <header></header>) no tendr ningn 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 navegacin 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 comn del posicionamiento sticky es para los encabezados en una lista alfabtica. En este ejemplo el encabezado "B" aparecer justo por debajo de los tems que comienzan con "A". El encabezado "B" se mantendr fijado al lmite 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 programacin</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.

Conclusin

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 tamao con width o height.

Recursos:

• Position | MDN
• CSS-Tricks | Article

Gracias por leer
Mis redes sociales donde comparto notas de cdigo:

Youtube
Instagram
Twitter
Facebook
Codepen
Medium
Tik Tok