Controlar el comportamiento de la cabecera fija y transparente

Los efectos de desplazamiento deben añadirse después de completar la cabecera estática de escritorio. Cambian cómo se comporta la navegación sobre el contenido de la página y mientras el visitante se desplaza, por lo que el contraste y el espacio libre del contenido deben probarse juntos.

Configurar el estado de desplazamiento

Abre Settings → POM Theme → Site layout → Header → Header general settings.

1. Activa Sticky header on scroll cuando la navegación deba permanecer disponible.
2. Activa Auto hide header on scroll cuando la cabecera deba ocultarse a medida que el visitante se desplaza hacia abajo.
3. Elige un modo de Navigation bar transparency:
   • Partially transparent
   • Totally transparent
   • Gradient (top to bottom)
   • Opaque
4. Establece Header navigation bar alpha cuando el tratamiento elegido utilice opacidad.
5. Guarda y prueba en una página lo bastante larga para desplazarse.

Navigation bar transparency también puede sobrescribirse para una entrada individual cuando esa pantalla de edición expone la opción correspondiente. Usa esa excepción para una imagen hero o una página de destino concreta, no para compensar un valor global por defecto inadecuado.

Coordinar la primera zona de contenido

Una cabecera transparente se sitúa visualmente sobre el contenido que hay detrás. Revisa la primera sección visible, especialmente cuando contenga:

• Una imagen clara o visualmente recargada
• Un título cerca del borde superior
• Un subencabezado con su propia imagen o superposición
• Migas de pan situadas inmediatamente después de la cabecera

Si la navegación pierde contraste, cambia el tratamiento de la cabecera o la sección subyacente. No confíes en el estado hover para que los enlaces esenciales sean legibles.

Probar cada transición

Usa una página de escritorio y comprueba:

1. El estado inicial en la parte superior de la página.
2. El estado después de un breve desplazamiento hacia abajo.
3. El desplazamiento continuado hacia abajo cuando la ocultación automática está activada.
4. El desplazamiento hacia arriba y el regreso de la cabecera.
5. El límite entre la cabecera, el subencabezado y las migas de pan.
6. El foco del teclado mientras la página está desplazada.
7. Que las barras laterales fijas, las filas y la navegación por pestañas permanezcan por debajo de la cabecera visible y sigan su movimiento de forma continua, sin saltos, a medida que se oculta y regresa.

Repite la prueba para un visitante con sesión iniciada si hay controles de inicio de sesión o un menú para usuarios conectados.

Correcciones habituales

• El contenido empieza bajo una cabecera opaca: revisa la estructura seleccionada y el espaciado de la primera sección.
• La navegación transparente es ilegible: usa un valor alpha más alto, un degradado, el modo opaco o un fondo más adecuado.
• La cabecera ocupa demasiado espacio vertical: reduce Header navigation bar padding antes de reducir los objetivos interactivos.
• Una sola entrada necesita un tratamiento distinto: usa la sobrescritura de entrada disponible y mantén el ajuste global apropiado para el resto del sitio.

Para la configuración sin desplazamiento, vuelve a Configurar la cabecera de escritorio.