Sistema de Cabecera Fija y Barra Superior

¿Qué hace Sistema de Cabecera Fija y Barra Superior?

Propósito

El Sistema de Cabecera Fija y Barra Superior proporciona un marco integral para diseñar, estructurar y configurar el comportamiento de las pilas de navegación persistentes en la parte superior de la página. Las aplicaciones web modernas y los sitios de marketing suelen utilizar barras superiores en capas, combinando banners promocionales de anuncios, enlaces de utilidad secundarios (selectores de moneda/idioma, enlaces de soporte, localizadores de tiendas) y barras de navegación principal.

Cuando estas barras permanecen fijas o adhesivas durante el desplazamiento, los sistemas mal diseñados introducen problemas críticos de usabilidad: consumen un excesivo espacio vertical del viewport en móviles, ocultan el contenido de destino de los anclajes (desajustes de scroll-margin-top), provocan tirones de diseño o tartamudeo durante los cambios de estado de desplazamiento, causan conflictos de apilamiento z-index con modales o menús desplegables, y atrapan el foco del teclado o rompen la navegación por hitos del lector de pantalla. Esta habilidad establece estándares de diseño, composición espacial, lógica de estado de desplazamiento, estilo de elevación y accesibilidad para los encabezados adhesivos.

Casos de Uso

• Encabezados Globales de Comercio Electrónico: Barras superiores de varios niveles que combinan banners de anuncios superiores (código promocional / progreso de envío gratuito), enlaces de utilidad (inicio de sesión de cuenta, selector de región, localizador de tiendas) y navegación principal adhesiva con barra de búsqueda e indicador de carrito.
• Encabezados de Marketing SaaS y Marketing de Producto: Encabezados limpios que se encogen al desplazarse (reduciendo el relleno/tamaño del logotipo) o un patrón dinámico de ocultar al bajar / revelar al subir para maximizar el lienzo de contenido vertical mientras se preserva el acceso instantáneo a la navegación.
• Encabezados de Portales de Contenido y Publicaciones: Encabezados adhesivos que integran barras de progreso de lectura, navegación por categorías, indicadores de título de artículo y herramientas flotantes de marcado rápido/compartir.
• Aplicaciones Web y Cáscaras de Aplicaciones SaaS: Barras superiores fijas que contienen migas de pan, conmutadores de espacio de trabajo activo, disparadores de búsqueda por comando, menús de perfil de usuario y campanas de notificación en tiempo real.

Cuándo NO Usar

• Barras de Herramientas de Formato en el Lienzo: Para barras de herramientas de editores de texto enriquecido o muelles de acciones masivas que flotan sobre el contenido o se adjuntan a componentes específicos del editor, use sistema-de-barras-de-herramientas-y-muelles-de-accion.
• Barras de Navegación Inferior Móvil: Para pestañas principales de aplicaciones móviles fijadas en la parte inferior del viewport móvil, use sistema-de-navegacion-inferior.
• Cáscaras de Navegación Lateral Completa: Para aplicaciones web SaaS complejas donde la navegación principal está impulsada por un carril lateral izquierdo plegable, use sistema-de-navegacion-lateral.
• Muelles de Acción Flotantes: Para botones contextuales flotantes fijados en las esquinas del viewport (por ejemplo, widgets de chat, FABs de volver arriba), use sistema-de-ui-adhesivo-y-flotante.

Entradas

1. Arquitectura de Niveles de la Barra Superior: Especificación de los niveles presentes (por ejemplo, Nivel 1: Barra de Anuncios, Nivel 2: Encabezado de Utilidad, Nivel 3: Navegación Principal).
2. Modelo de Comportamiento de Desplazamiento: Mecánica adhesiva deseada (adhesivo-siempre, encoger-al-desplazar, ocultar-al-bajar / revelar-al-subir, o estático-a-adhesivo).
3. Tokens de Superficie y Tema: Colores de fondo de superficie, tokens de borde, efectos de desenfoque de fondo (backdrop-filter: blur()) y sombras de elevación de sistema-de-elevacion-y-profundidad y sistema-de-color-accesible.
4. Objetivos de Viewport y Dispositivo: Umbrales de punto de interrupción (< 768px, < 1024px, ≥ 1024px) para colapsar encabezados de escritorio de varios niveles en barras superiores móviles unificadas.

Salidas

1. Especificación de Diseño y Apilamiento de Cabecera Adhesiva: Estructuras CSS Grid/Flexbox que definen el posicionamiento fijo/adhesivo, variables de propiedad personalizada CSS de compensación (--header-height) y escalas de jerarquía z-index.
2. Reglas de Transición de Estado de Desplazamiento y Movimiento: Especificación técnica para la lógica del oyente de desplazamiento, compensaciones de umbral, clases CSS de transición (.is-scrolled, .is-hidden) y transformaciones aceleradas por hardware (transform: translateY()).
3. Especificación de Colapso Móvil Responsivo: Reglas de diseño que convierten las barras superiores de escritorio de varias filas en un encabezado móvil único y compacto con un activador de cajón.
4. Plano de Accesibilidad WCAG AA: Implementación de enlace de salto (.skip-link), compensación de scroll-margin-top para anclajes de encabezados, evitación de captura de foco de teclado y estructura de hitos de lector de pantalla (<header>, <nav>, role="banner").

---

Flujo de Trabajo

1. Estructurar la Jerarquía de Apilamiento de la Barra Superior

Determinar la composición de la barra superior de varios niveles y establecer el diseño HTML semántico:

• Contenedor HTML Semántico: Envuelva todas las barras superiores dentro de una sola etiqueta <header role="banner"> para mantener un hito de banner claro para los usuarios de lectores de pantalla.
• Nivel 1: Barra de Anuncios (<aside> o <div>): Micro-banner de alta prioridad en la parte superior absoluta (por ejemplo, umbral de envío gratuito, alerta del sistema).
• Nivel 2: Barra de Utilidad (<div class="utility-bar">): Enlaces secundarios, selectores de idioma/moneda, enlaces de contacto, atención al cliente.
• Nivel 3: Navegación Principal (<nav aria-label="Navegación Principal">): Logotipo de la marca, enlaces de sección principal, entrada de búsqueda, enlace de cuenta, carrito de compras o CTA principal.

2. Definir el Posicionamiento y la Mecánica de Desplazamiento

Elegir el enfoque de implementación adhesiva basado en la densidad de contenido y las restricciones del viewport:

• position: sticky vs position: fixed:
  • Preferir position: sticky; top: 0; z-index: 1000; en el contenedor para permitir el flujo natural del documento antes de fijarse en la parte superior.
  • Usar position: fixed; top: 0; left: 0; right: 0; cuando el contenido del cuerpo utilice explícitamente padding-top: var(--header-height);.
• Estrategia de Colapso de Desplazamiento Multinivel:
  • Al desplazarse más allá de un umbral (por ejemplo, scrollY > 50px), la Barra de Anuncios y la Barra de Utilidad se desplazan fuera de la vista de forma natural, mientras que la Navegación Principal se bloquea (position: sticky; top: 0;) O todo el encabezado hace la transición.
  • Calcular las propiedades personalizadas CSS dinámicamente (por ejemplo, --header-height) para que el contenido principal de la página y los enlaces de anclaje se ajusten correctamente.

3. Implementar Transiciones de Estado de Desplazamiento y Microinteracciones

Mejorar la ergonomía del encabezado a medida que el usuario se desplaza hacia abajo en la página:

• Transición de Encogimiento al Desplazar:
  • Estado predeterminado (en la parte superior): Altura del encabezado 80px, altura del logotipo 40px, relleno 1.25rem 2rem.
  • Estado desplazado (.is-scrolled): Altura del encabezado 60px, altura del logotipo 30px, relleno 0.75rem 2rem.
  • Animación suave: Usar transiciones CSS aceleradas por hardware (transition: padding 0.25s ease, height 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;).
• Ocultación/Revelación Dinámica (Encabezado Inteligente):
  • Desplazamiento hacia abajo (scrollY > lastScrollY && scrollY > 150px): Aplicar transform: translateY(-100%); para deslizar el encabezado fuera de la pantalla, maximizando el viewport de lectura.
  • Desplazamiento hacia arriba (scrollY < lastScrollY): Aplicar transform: translateY(0); para revelar inmediatamente la navegación.
• Elevación de Superficie y Desenfoque de Fondo:
  • En la parte superior de la página: Fondo semitransparente o fondo plano sin sombra.
  • Al desplazarse: Agregar superficie sólida/vidriomórfica (background-color: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px);) y sombra de elevación (box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);).

4. Configurar la Adaptación al Viewport Móvil

Los viewports móviles (< 768px) tienen un espacio vertical severamente limitado:

• Techo de Altura del Encabezado Móvil: Limitar la altura del encabezado adhesivo móvil a un máximo de 56px–64px para evitar consumir >10% de la altura de la pantalla móvil.
• Reducción de Niveles Móviles: Ocultar las Barras de Utilidad secundarias en móvil, transfiriendo los enlaces de utilidad al Cajón de Navegación Móvil plegable.
• Consolidación de la Barra de Anuncios: Comprimir el texto del anuncio a un microtexto conciso o un ticker de rotación automática, o mantenerlo estático sobre el encabezado principal adhesivo.

5. Exigir Accesibilidad WCAG AA y Gestión del Foco

• Enlace Saltar al Contenido Principal: Proporcionar un enlace de salto de nivel superior como el primer elemento enfocable (<a href="#main-content" class="skip-link">Saltar al contenido principal</a>). Al enfocarse mediante Tab, posicionarlo visiblemente sobre el encabezado adhesivo (top: 1rem; left: 1rem; z-index: 9999;).
• Margen de Desplazamiento del Destino del Anclaje (scroll-margin-top): Evitar que los encabezados adhesivos se superpongan a los encabezados cuando los usuarios hagan clic en enlaces de anclaje internos o elementos de la tabla de contenido:

  :target, [id] {
    scroll-margin-top: calc(var(--header-height) + 1.5rem);
  }
  

• Navegación por Teclado y Menús Desplegables: Asegurar que todos los menús desplegables del encabezado (mega-menús, menús de cuenta, conmutador de hamburguesa móvil) sean completamente operables mediante Tab, Enter, Espacio y Escape.
• Prefiere-Movimiento-Reducido: Respetar las preferencias de movimiento del usuario desactivando las transformaciones de deslizamiento y las transiciones de diseño:

  @media (prefers-reduced-motion: reduce) {
    .site-header { transition: none !important; }
  }
  

---

Reglas de Decisión

Matriz de Selección de Mecánica de Desplazamiento Adhesivo

Tipo de Sitio	Comportamiento de Desplazamiento Recomendado	Adaptación Móvil	Justificación
Tienda de Comercio Electrónico	Nav Principal Adhesiva + Barras Superiores Estáticas	La barra promocional superior se desplaza; la Nav principal permanece adhesiva (56px)	Mantiene la búsqueda, el contador del carrito y las categorías accesibles en todo momento para maximizar la conversión.
Aterrizaje SaaS / Marketing	Encogerse al Desplazar u Ocultar/Revelar Inteligente	Encabezado unificado de 60px; se oculta al bajar, se revela al subir	Maximiza el lienzo visual del héroe y el espacio de lectura mientras proporciona acceso instantáneo a la navegación según la intención.
Blog de Contenido / Editorial	Ocultar/Revelar Inteligente con Progreso de Lectura	Barra superior compacta con indicador de barra de progreso de desplazamiento	Otorga el 100% del espacio del viewport a la lectura de formato largo, devolviendo la navegación instantáneamente al desplazarse en reversa.
Aplicación Web / Panel	Encabezado Siempre Visible Fijo	Encabezado de una sola fila fijo (56px)	Funciona como cáscara de utilidad de la aplicación; la ocultación dinámica causa desorientación durante el flujo de trabajo.

Escala de Capas Z-Index

Mantener una orquestación estricta de z-index en todo el sistema de diseño global:

z-index: 10000; -> Enlace Saltar al Contenido (cuando está enfocado)
z-index: 9000;  -> Diálogos Modales / Lightboxes
z-index: 8000;  -> Cajón de Navegación Móvil / Superposición
z-index: 7000;  -> Banners Globales de Toast y Notificaciones
z-index: 1000;  -> Pila de Encabezado Adhesivo / Fijo
z-index: 500;   -> Barras de Herramientas Contextuales y Muelles Flotantes
z-index: 1;     -> Tarjetas de Contenido de Contexto de Apilamiento

---

Restricciones

• Accesibilidad (WCAG 2.1 AA):
  • SC 2.4.1 Bloquear Bypass: Debe incluir un enlace visible de Saltar al Contenido Principal que preceda a la navegación del encabezado.
  • SC 1.4.3 Contraste: El texto del encabezado, los iconos y los activadores del menú deben cumplir con una relación de contraste mínima de 4.5:1 tanto en los estados de encabezado desplazado como no desplazado.
  • SC 2.4.7 Foco Visible: Los indicadores de foco deben permanecer completamente visibles y no recortados al tabular a través de elementos del encabezado adhesivo sobre cualquier color de fondo.
• Rendimiento y Renderizado:
  • Los oyentes de desplazamiento deben ser limitados o vinculados mediante requestAnimationFrame o IntersectionObserver para evitar tirones de diseño sincrónicos forzados durante los eventos de desplazamiento.
  • Los filtros de desenfoque (backdrop-filter) deben limitarse cuidadosamente y probarse para detectar retrasos de GPU en dispositivos móviles de baja potencia.
• Protección del Diseño del Viewport: Los encabezados adhesivos en dispositivos móviles nunca deben exceder 64px de altura o el 15% de la altura del viewport visual cuando están adhesivos.

---

Patrones de Fallo Comunes

• Error de Superposición de Contenido de Anclaje: Al hacer clic en un enlace interno (#seccion-2), la sección de encabezado se desplaza directamente debajo del encabezado adhesivo, haciendo que el título sea invisible porque se omitió scroll-margin-top.
• Acaparamiento de la Pantalla del Viewport: Mantener un encabezado adhesivo de escritorio de varios niveles de 140px en pantallas móviles, dejando menos del 60% de la pantalla móvil visible para el contenido real de la página.
• Tirón de Diseño por Desplazamiento: Consultar header.offsetHeight dentro de un oyente window.onscroll sin limitar, causando tirones de diseño y desplazamiento entrecortado a 30fps.
• Conflictos de Apilamiento Z-Index: Dar a un encabezado adhesivo z-index: 999999, provocando que se renderice de manera incómoda sobre superposiciones de fondo de modal o lightboxes de pantalla completa.
• Recorte del Indicador de Foco: Colocar elementos dentro de un contenedor fijo con overflow: hidden, haciendo que los anillos de foco en los enlaces superior/inferior se corten visualmente.

---

Criterios de Validación

• El contenedor del encabezado utiliza <header role="banner"> semántico con la subnavegación encerrada en <nav aria-label="...">.
• El enlace Saltar al Contenido Principal está presente, es accesible como primer objetivo de tabulación del teclado y se posiciona visiblemente sobre el encabezado adhesivo cuando está enfocado.
• Los elementos de destino de enlace de anclaje interno establecen scroll-margin-top igual o superior a la altura máxima del encabezado adhesivo.
• La altura del encabezado adhesivo móvil no supera los 64px, con las barras superiores secundarias colapsadas en el cajón móvil.
• Las transiciones de estado de desplazamiento (encogimiento u ocultación/revelación) utilizan propiedades CSS aceleradas por hardware (transform, opacity) y limitan los cálculos de desplazamiento.
• El contraste de texto e iconos en estados transparentes, desplazados o de vidrio desenfocado cumple con WCAG AA (relación ≥4.5:1).
• La capa de z-index se adhiere a la escala del sistema (Encabezado en z-index: 1000, por debajo de Modales y Cajones).