El encabezado flotante (pegajoso) facilita la navegación por el sitio. Desde un punto de vista técnico, esta técnica se implementa con mayor frecuencia mediante código JavaScript. Pero también se puede crear un encabezado pegajoso utilizando simples reglas CSS, que es lo que veremos en este artículo.
El comando CSS principal que necesitarás para crear un encabezado flotante en tu tienda Shopify es el siguiente:
position: sticky;
La simplicidad de esta solución tiene desventajas negativas:
- No se puede aplicar animación al pasar el encabezado de un estado fijo a uno flotante.
- No se puede elegir qué bloques del encabezado deben ser flotantes y cuáles deben permanecer fijos. Por ejemplo, si en el encabezado de tu tema hay un anuncio de texto o la navegación del sitio, todos esos bloques dentro del encabezado general también serán flotantes.
- El soporte del navegador para la propiedad sticky no es absoluto. En su mayoría, las versiones antiguas de los navegadores no soportan esta propiedad. Esto significa que en esos navegadores tu encabezado permanecerá fijo, como si no hubieras aplicado la propiedad "sticky". Actualmente, la propiedad funcionará para el 95% de los usuarios de navegadores. Aquí puedes ver información actualizada sobre el soporte de la propiedad "sticky".
Si has instalado en tu tienda uno de los temas gratuitos de Shopify y la técnica del encabezado flotante no está implementada, solo necesitas agregar el siguiente código en la sección header.liquid de tu tema (al inicio o al final del archivo):
<style>
#shopify-section-header {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 100;
background-color: white; /* Indicamos el color de fondo del encabezado por si es transparente */
}
</style>
Si en tu tienda tienes un tema personalizado o de pago, deberías contactar a los desarrolladores o al soporte de tu tema. O simplemente deja en los comentarios el enlace a tu tienda para que te ayudemos a encontrar una solución.
Dejar un comentario