En este artículo, vamos a hablar sobre cómo mantener un elemento fijo en el navegador. De tal forma que cuando realicemos un desplazamiento (schroll) hacía abajo sobre la barra de navegación (schroll bar) de nuestro navegador, dicho elemento continue permaneciendo dentro de la parte visible de la web.

Para ello, vamos a ver explicar dos maneras mediante a dos valores distintos que aplicaremos a la propiedad position sobre el selector de elemento.

Ejemplo inicial

El ejemplo inicial sobre el que partiremos será una sencilla web con una barra de navegación/menú (elemento nav) y un artículo (elemento article).  En nuestra web de ejemplo, queremos tener siempre visible el menú conforme nos desplazamos hacía abajo. Dentro del artículo, hemos insertado un pedazo bastante grande de lorem ipsum (texto que se suele usar para rellenar una web provisionalmente) con el fin de que nos aparezca la barra de desplazamiento (scholl bar). Y con ello, poder hacer un desplazamiento hacia abajo (scholl) para poder ver que realmente se nos mantiene el menú.

El index.html contendrá:

El style.css contendrá:

El resultado del ejemplo inicial será:

Vemos que a medida que vamos desplazándonos hacía abajo, el menú desaparece.

Vamos a hacer que se mantenga fijo.

Ejemplo con position: fixed;

Si añadimos position fixed y top 0 al selector CSS de nuestro menú nav con el fin de posicionar lo más arriba posible nuestro elemento:

Podremos ver que el resultado no tiene nada que ver con el esperado. ¿Qué nos está pasando? Pues que podemos ver la parte inicial del article se nos ha desplazado hasta el punto 0, 0 del navegador y se ha posicionado debajo de menú de navegación.

Cuando desplazamos, podemos ver que se mantiene el menú de navegación:

Por lo que, podemos decir que tenemos la funcionalidad a medias. ¿Qué opciones tenemos? ¿Cómo podemos arreglarlo? Una manera de arreglar esto sería darle un margen a nuestro artículo con el fin de que se vea al 100% el contenido de este.

El resultado como podemos ver:

Ahora si es el correcto, ya que cuando nos desplazamos podemos ver que el menú se mantiene.

Ejemplo con position: sticky;

Aunque esto realmente nos funciona, podríamos decir que es un poco chapuzero ya que puede ser bastante problematico si buscamos construir un sitio sea responsive (que se adapte a distintos dispositivos). Actualmente CSS, nos ofrece mecanismos que se adaptan mejor a esta casuistica y la solventan de una manera más óptima. Vamos a verlo:

Una solución mucho más limpia que añadir un margen superior junto a position: fixed; a nuestro artículo será utilizar position: sticky.

Vamos a ver un ejemplo:

Podemos ver que con poner position: skicky; y añadiendo el witdh:100%; en el menú  de navegación. Y eliminamos el margen superior del artículo que hemos añadido en el ejemplo anterior, solucionamos todos nuestros males. Y ahora sí, se nos ajusta perfectamente inmediantamente de nuestro menú nav.

Skicty es la forma más recomendada de ambas para trabajar con esta casuística, debido a que directamente se adapta al margen del elemento sobre el que hemos definido. Y al adaptarse, será más sencillo de trabajar para hacer la web responsive, etc.

Espero que os haya quedado mucho más claras las diferencias entre trabajar los valores fixed y sticky de la propiedad position. Un saludo