Rimuovi gli header fissi che coprono i contenuti
Gli header fissi dovevano tenere la navigazione a portata di mano. Troppo spesso ti seguono soltanto giù per la pagina, inghiottendo un terzo dello schermo e nascondendo il titolo su cui hai appena cliccato. Ecco come domarli con JustZix.
I due problemi degli header fissi
Primo, costano spazio verticale — su un portatile una grossa barra fissa più una striscia fissa per i cookie possono mangiare metà del viewport. Secondo, rompono i link di ancoraggio: salti a una sezione e il titolo finisce dietro l'header, nascosto. Entrambi si risolvono con puro CSS.
Ricetta 1: rendi l'header completamente non fisso
Se non hai bisogno che la barra di navigazione ti segua, la soluzione più pulita è farla scorrere via come un normale contenuto.
/* Fai scorrere via gli header normalmente */
header, .site-header, .navbar,
[class*="sticky-header"], [class*="header-fixed"],
[style*="position: sticky"], [style*="position:fixed"] {
position: static !important;
top: auto !important;
}Questa è la regola di maggior impatto di questo articolo: recuperi all'istante lo spazio dello schermo e l'header è comunque lì in cima quando scrolli verso l'alto.
Ricetta 2: tieni l'header ma correggi i salti agli ancoraggi
Forse ti piace la barra fissa e odi solo che copra i titoli dopo un salto a un ancoraggio. La proprietà scroll-margin-top dice al browser di lasciare spazio.
/* Impedisci all'header fisso di nascondere i target degli ancoraggi */
:target,
h1[id], h2[id], h3[id], h4[id] {
scroll-margin-top: 90px !important;
}Imposta il valore all'incirca all'altezza dell'header. Se i titoli finiscono ancora troppo in alto o troppo in basso, regola il 90px finché le sezioni ancorate non si posizionano appena sotto la barra.
Ricetta 3: rimpicciolisci un header sovradimensionato
Alcuni header sono fissi ed enormi. Se vuoi tenerlo bloccato ma recuperare spazio, limita la sua altezza e nascondi gli extra ingombranti.
/* Snellisci un header fisso gonfiato */
.site-header, header.sticky {
max-height: 48px !important;
overflow: hidden !important;
}
/* Elimina le righe secondarie: barre di ricerca, strisce promo */
.header-promo, .header-secondary,
.sub-nav, .announcement-bar {
display: none !important;
}Ricetta 4: nascondi l'header finché non scrolli verso l'alto
Per un risultato più curato, nascondi l'header durante la lettura e rivelalo solo quando scrolli verso l'alto. Serve una piccola regola JS.
// Mostra l'header solo scrollando verso l'alto
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 });
}Ora l'header si ritira mentre leggi verso il basso e riappare nell'istante in cui scrolli verso l'alto — il comportamento che la maggior parte dei siti avrebbe dovuto avere fin dall'inizio.
Non dimenticare il footer
I footer fissi e le bolle di chat causano lo stesso problema di consumo dei contenuti in fondo allo schermo. Lo stesso approccio li elimina:
/* Rimuovi i footer fissi e i widget di chat */
.sticky-footer, [class*="cookie-bar"],
[class*="chat-widget"], [id*="intercom"],
[class*="floating-cta"] {
display: none !important;
}Scegli la ricetta giusta
- Vuoi il massimo dello spazio? Usa la Ricetta 1.
- Ti piace la barra, odi i salti? Usa la Ricetta 2.
- Vuoi un compromesso? Combina la Ricetta 3 e la 4.
Applicale per singolo sito, poiché il markup degli header è diverso ovunque. JustZix tiene separata la regola di ogni sito così puoi metterne a punto una senza toccare le altre.
Inizia a riconquistare il tuo schermo
Installa dalla pagina scarica JustZix e sfoglia gli esempi pronti all'uso per altre correzioni di layout. Gli header fissi spesso condividono lo spazio con i banner pubblicitari: elimina anche quelli con la nostra guida su /it/blog/block-display-ads-with-css-rules.
Valuta questo articolo
Nessuna valutazione — sii il primo.