Nella guida utile di oggi vediamo come posizionare al meglio gli anchor text con un header fixed andando a impostare un giusto offset.
Molto spesso questo problema capita a chi ha un header fixed allo scorrimento della pagina,quando si una un’ancora di fatto non si tiene conto dell’altezza dell’header e pertanto l’effetto di “posizionamento” sparisce.
Per ovviare a questo inconveniente potete aggiungere la seguente classe al vostro css:
.ancora{
padding-top: 60px !important; /*60 è l'altezza dell'header*/
margin-top: -60px !important; /*60 è l'altezza dell'header*/
}
Una volta aggiunta, vi basterà andare a specificare nel punto di ancoraggio la classe in questo modo:
<a href="#test">Vai al test</a>
[...]
<h3 id="test" class="ancora"> Test </h3>Una volta fatto dovrebbe funzionare tutto correttamente senza creare problemi di layout con il resto, e senza usare nemmeno una riga di codice js.
Questo articolo ti è stato utile? Clicca su commenta qui sotto e lasciami il tuo feedback!
Image credits “javascript” disponibile su shutterstock
