Tutoriales
Claude Opus 5.5: corrige enlaces de sección ocultos por una cabecera fija
Antes de añadir un desplazamiento, pide a Claude Opus 5.5 que mida el espacio ocupado por la cabecera e identifique el contenedor que se desplaza.
Antes de añadir un desplazamiento, pide a Claude Opus 5.5 que mida el espacio ocupado por la cabecera e identifique el contenedor que se desplaza. Un título puede tener el fragmento correcto y quedar oculto por la navegación. La solución debe resistir menús en dos filas, banners y foco de teclado.
Una pregunta sobre cabeceras fijas describe este síntoma. Es contexto comunitario, no un diagnóstico de tu página. Aquí se propone una reparación con un cálculo de diseño, no una prueba ejecutada con Opus.
Localiza dónde falta espacio
| Situación | Inspeccionar | Corrección probable |
|---|---|---|
| Todos los destinos quedan ocultos | Contenedor y altura superpuesta | Scroll padding del contenedor |
| Solo un destino necesita separación | Alineación de ese destino | Scroll margin del destino |
| El menú móvil ocupa dos filas | Altura real ocupada | Valor adaptable o medido |
| Se oculta un control enfocado | Recorrido de teclado y superposiciones | Visibilidad del foco, además del fragmento |
MDN describe scroll-margin-top como un desplazamiento del área de desplazamiento del destino. No lo confundas con el margen visible del diseño. La técnica C43 del W3C muestra scroll padding para contenido tapado. Un salto correcto no completa una evaluación de accesibilidad.
Calcula un valor y compruébalo
Supón una página ficticia con navegación fija de 64 píxeles CSS y una franja de promoción de 32 justo encima. Ocupan 96; con un hueco deseado de 16, resultan 112 píxeles. Si el menú pasa a 88 de alto, el total será 136. Son dimensiones supuestas y cálculos, no medidas de Panelly.
Para escritura horizontal, documento como contenedor y superposición confirmada de 96 píxeles, este es un punto de partida:
html { scroll-padding-top: 112px; }El valor ya incluye el hueco. No añadas por costumbre otros 112 de scroll margin al destino: la suma puede ser excesiva. Si un destino necesita más espacio, decide su incremento particular. Identifica el desplazador real cuando el contenido esté en un panel; configurar `html` no configura otro contenedor.
Un número fijo deja de servir cuando aparece un banner o se envuelve el menú. Considera un diseño sin solapamiento, un valor adaptable o una altura compartida medida con cuidado. Prueba tras cargar fuentes. Si una cabecera ocupa demasiado en móvil, quitar su fijación puede ser mejor que aumentar indefinidamente el desplazamiento.
Instrucción de reparación para Opus
Úsala con la guía oficial de Opus.
Inspecciona marcado, estilos calculados, medidas de cabecera y banner y URL de fragmento que falla. Identifica el contenedor real y toda superposición fija o adhesiva que afecte al destino.
Separa espacio del flujo normal, scroll padding del contenedor y scroll margin del destino. Calcula altura ocupada más hueco solicitado. No acumules valores sin explicar su efecto combinado. Considera menú envuelto, carga de fuentes y cierre del banner.
Propón el parche mínimo que preserve IDs y enlaces existentes. Mantén navegación nativa cuando sea práctica. No fuerces foco al título solo para mejorar una captura; explica cualquier cambio deliberado de gestión del foco.
Devuelve pruebas de clic interno, carga directa del fragmento, Atrás, Tab y Shift+Tab y diseños de 320/390/1440 píxeles CSS. Incluye zoom y cabecera de dos filas. Registra por separado visibilidad del destino y del control enfocado. Deja pendientes los resultados de navegador no observados.Prueba los dos recorridos
Primero pulsa un enlace y carga directamente la misma URL con fragmento. Tras estabilizar fuentes e imágenes, revisa el borde superior del título y usa Atrás. Conserva los IDs para mantener enlaces guardados. Una solución que funciona solo tras un manejador personalizado de clic no supera la prueba directa.
Después recorre enlaces y controles con Tab y Shift+Tab. Comprueba el elemento enfocado bajo superposiciones superiores e inferiores. No deduzcas el teclado de una captura con ratón. Repite con banner abierto, cerrado y zoom aumentado. Registra fallos por ancho y estado para reparar casos reproducibles.
Decisiones habituales
**¿El padding normal arregla todos los destinos?** Cambia el diseño; la alineación al desplazar requiere revisión aparte.
**¿Cada salto necesita JavaScript?** Empieza con enlaces nativos y CSS si cubren los casos reales.
**¿Basta una prueba de escritorio?** El menú envuelto y el zoom cambian el espacio ocupado.
Cuando funcione la navegación, crea imágenes de campaña en Panelly Studio. Para el movimiento durante la navegación, la revisión de movimiento reducido trata otra conducta dependiente de preferencias.
