In questo articolo vediamo come ottenere una semplice header fissa e con un pizzico di animazione. Può essere utile a volte avere un header che rimane fissa allo scroll della pagina, specie quando si hanno nel sito molte pagine sviluppate in altezza.
Per prima cosa creiamo l’header, che nel caso dell’esempio contiene solamente il logo. A livello di codice HTML, l’header sarà costituita da due div, uno in posizione fissa e l’altro in posizione relativa. Quest’ultimo lo utilizzeremo soltanto per abbassare il contenuto della pagina, assegnandogli un’altezza per evitare che tale contenuto finisca sotto l’header fissa.
HTML
[code_snippet y=”2016″ name=”realizzare-un-header-fissa-animata” id=”1″]
A questo punto possiamo fare il più del lavoro utilizzando i fogli stile. La classe header-fixed raccoglie gli stili dell’header che vediamo appena carichiamo la pagina e non siamo ancora scesi con lo scroll.
CSS
[code_snippet y=”2016″ name=”realizzare-un-header-fissa-animata” id=”2″]
Per finire utilizziamo Javascript per aggiungere una classe (resized) quando si inizia a scrollare la pagina. Questa classe sposterà verso l’alto l’header e ridurrà le dimensioni del logo.
Javascript
[code_snippet y=”2016″ name=”realizzare-un-header-fissa-animata” id=”3″]
