Elimina las cabeceras fijas que cubren el contenido
Las cabeceras fijas debían mantener la navegación a mano. Con demasiada frecuencia simplemente te acechan página abajo, tragándose un tercio de la pantalla y ocultando el encabezado al que acabas de hacer clic. Así puedes domarlas con JustZix.
Los dos problemas de las cabeceras fijas
Primero, cuestan espacio vertical: en un portátil, una barra fija gruesa más una franja de cookies fija pueden comerse la mitad de la ventana de visualización. Segundo, rompen los enlaces de ancla: saltas a una sección y el encabezado aterriza tras la cabecera, oculto. Ambos son arreglos de CSS puro.
Receta 1: despegar la cabecera por completo
Si no necesitas que la barra de navegación te siga, el arreglo más limpio es hacer que se desplace como contenido normal.
/* Hacer que las cabeceras se desplacen normalmente */
header, .site-header, .navbar,
[class*="sticky-header"], [class*="header-fixed"],
[style*="position: sticky"], [style*="position:fixed"] {
position: static !important;
top: auto !important;
}Esta es la regla de mayor impacto de este artículo: recuperas al instante el espacio de pantalla y la cabecera sigue ahí arriba cuando te desplazas hacia arriba.
Receta 2: conservar la cabecera pero arreglar los saltos de ancla
Quizá te guste la barra de navegación fija y solo odies que cubra los encabezados tras un salto de ancla. La propiedad scroll-margin-top le dice al navegador que deje espacio.
/* Impedir que la cabecera fija oculte los destinos de ancla */
:target,
h1[id], h2[id], h3[id], h4[id] {
scroll-margin-top: 90px !important;
}Fija el valor aproximadamente a la altura de la cabecera. Si los encabezados aún aterrizan demasiado arriba o demasiado abajo, ajusta el 90px hasta que las secciones ancladas queden justo debajo de la barra.
Receta 3: encoger una cabecera sobredimensionada
Algunas cabeceras son fijas y enormes. Si quieres mantenerla anclada pero recuperar espacio, limita su altura y oculta los extras voluminosos.
/* Adelgazar una cabecera fija inflada */
.site-header, header.sticky {
max-height: 48px !important;
overflow: hidden !important;
}
/* Quitar filas secundarias: barras de búsqueda, franjas promocionales */
.header-promo, .header-secondary,
.sub-nav, .announcement-bar {
display: none !important;
}Receta 4: ocultar la cabecera hasta que te desplaces hacia arriba
Para un resultado más pulido, oculta la cabecera mientras lees y muéstrala solo cuando te desplaces hacia arriba. Esto necesita una pequeña regla JS.
// Mostrar la cabecera solo al desplazarse hacia arriba
let lastY = window.scrollY;
const bar = document.querySelector('header, .site-header, .navbar');
if (bar) {
bar.style.transition = 'transform .2s ease';
window.addEventListener('scroll', () => {
const y = window.scrollY;
bar.style.transform =
(y > lastY && y > 200) ? 'translateY(-100%)' : 'translateY(0)';
lastY = y;
}, { passive: true });
}Ahora la cabecera se esconde a medida que lees hacia abajo y vuelve a deslizarse en el instante en que te desplazas hacia arriba: el comportamiento que la mayoría de los sitios debería haber incluido en primer lugar.
No olvides el pie de página
Los pies de página fijos y las burbujas de chat causan el mismo problema de comer contenido en la parte inferior de la pantalla. El mismo enfoque los limpia:
/* Eliminar pies de página fijos y widgets de chat */
.sticky-footer, [class*="cookie-bar"],
[class*="chat-widget"], [id*="intercom"],
[class*="floating-cta"] {
display: none !important;
}Elige la receta adecuada
- ¿Quieres el máximo espacio? Usa la Receta 1.
- ¿Te gusta la barra de navegación pero odias los saltos? Usa la Receta 2.
- ¿Quieres un compromiso? Combina las Recetas 3 y 4.
Aplícalas por sitio, ya que el marcado de las cabeceras difiere en todas partes. JustZix mantiene la regla de cada sitio por separado para que puedas ajustar una sin tocar las demás.
Empieza a recuperar tu pantalla
Instala desde la página de descargar JustZix y explora los ejemplos listos para usar para más arreglos de maquetación. Las cabeceras fijas suelen compartir espacio con banners de anuncios: límpialos también con nuestra guía en /es/blog/block-display-ads-with-css-rules.
Valora este artículo
Sin valoraciones — sé el primero.