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.
[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.
[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.
[code_snippet y=”2016″ name=”realizzare-un-header-fissa-animata” id=”3″]
Se sei un appassionato di oggetti da collezione, è probabile che tu abbia già sentito…
Se ne soffri la conosci e se non ne soffri, invece, sarebbe meglio conoscerla per…
Da sempre l’uomo è rimasto affascinato e si è interessato alla magia. Che sia nella…
Il contratto di locazione a canone concordato è una forma di locazione in cui la misura del…
Negli ultimi anni, soprattutto da dopo la pandemia, sempre più italiani si sono rivolti a…
Stai pensando di abbellire il tuo giardino installando una piscina di ultima generazione? Se la…