La propiedad position de CSS es comúnmente utilizada a la hora de definir el comportamiento de un elemento respecto al entorno donde se encuentra. Sus valores pueden ser static, relative, absolute, fixed o sticky y es de este último valor del que vamos a hablar a continuación.
Habremos visto en muchas páginas webs que al hacer scroll un elemento queda siempre visible en de visualización del navegador, como si se quedara pegado (de ahí que el valor se llame sticky). Esto se hacía tradicionalmente con JavaScript, sin embargo tal era su uso que se decidió integrar como parte del estándar de CSS y actualmente casi todo los navegadores lo soportan.
Definimos en nuestro contenedor como sticky y decimos dónde queremos que quede pegado al hacer scroll usando top, right, bottom o left. Imaginemos que lo vamos a aplicar al menú principal de una web para que siempre quede arriba visible, sería algo así.
.menu-principal {
position: sticky;
top: 0;
}Bien, todo parece estar correcto, nos hemos asegurado de que el navegador lo soporta, que no hemos cometido errores de sintaxis y sin embargo nuestro elemento se sigue comportando como antes y parece no afectarle la nueva propiedad. Cuando esto ocurra puedes revisar dos cuestiones importantes que pueden afectar al funcionamiento correcto: que el contenedor padre esté definido con display: unset y prestar atención a que ninguna otra capa que se encuentre en una jerarquía superior use overflow: hidden, ya que esta propiedad interfiere también.
No son los únicos aspectos que podrían hacer que no funcione, pero sí los más comunes. Si te sigue sin funcionar o tienes una solución alternativa te animo a que la compartas en los comentarios.
Deja una respuesta