← Tutti gli articoli

Tutorial

Doma gli elementi sticky che coprono il tuo contenuto

15 maggio 2026 · di JustZix Team

Un header sticky che resta alto 90 px mentre scrolli. Una barra fluttuante «iscriviti alla newsletter». Un pulsante «torna su» che copre l'ultima frase di un paragrafo. Gli elementi incollati allo schermo possono mangiare un terzo della vista. Ecco come domarli.

Cosa li incolla

Due proprietà CSS: position: sticky (l'elemento si incolla appena scrolli fino al suo posto) e position: fixed (l'elemento sta fermo fin dall'inizio). Entrambe possono essere sovrascritte.

Due approcci

Stacca — l'elemento resta, ma scorre con la pagina. Buono per gli header utili, che semplicemente non devono stare in cima per sempre.

header, .site-header, .navbar,
[class*="sticky"], [class*="fixed"] {
  position: static !important;
}

Nascondi — l'elemento sparisce del tutto. Buono per i CTA fluttuanti, i widget «torna su», le barre promozionali.

[class*="back-to-top"], [class*="scroll-top"],
[class*="sticky-cta"], [class*="floating-bar"] {
  display: none !important;
}

Come trovare il colpevole

Non sei sicuro di quale elemento sia incollato? Apri la JS Console di JustZix e digita:

[...document.querySelectorAll('*')]
  .filter(el => {
    const p = getComputedStyle(el).position;
    return p === 'fixed' || p === 'sticky';
  })
  .forEach(el => console.log(el));

La console elenca ogni elemento fixed e sticky — passa il mouse su ciascuno per vederlo nella pagina, poi copia la sua classe nel selettore della regola.

Trappole

• Staccare un header può costarti esteticamente. Alcuni layout contano sul fatto che l'header sia fixed; dopo position: static il contenuto sotto può saltare in alto. Di solito accettabile, ma controlla.
• Non ogni sticky è cattivo. Un indice sticky o una barra di avanzamento della lettura possono essere utili — punta con precisione, non all'ingrosso.
• Selettori per frammento di classe. [class*="fixed"] colpisce anche .fixed-width, che con il posizionamento non c'entra nulla. position: static su di esso non rompe niente, ma è bene saperlo.

Vedi anche

• Esempi — lo snippet per nascondere i widget di chat e altri
• Nascondi i banner cookie — sfoltimento affine degli elementi invadenti
• Costruisci la tua modalità lettura — sfoltire una pagina fino in fondo

Installa JustZix — e recupera lo schermo occupato dalle barre incollate.