Logo Froglab Agenzia di Comunicazione

Tutorial: cambiare colore dell'header con lo scroll

Scritto da francesco nella categoria   il giorno 25 Giugno 2021
Schermata di un sito blu

Che meraviglia gli header trasparenti: danno importanza al contenuto della pagina e permettono di dare più "aria" al design. Cosa succede però al nostro header sticky trasparente quando scrolliamo la pagina? Nella gran parte dei casi diventa completamente illeggibile, perché quello che vale per la nostra hero non sempre vale per il resto del sito. Come risolvere il problema, quindi? Semplicemente con un pizzico di CSS e di jQuery.

Questo tutorial funziona con tutti i temi e tutti i builder in commercio: l'esempio è stato prodotto su WordPress utilizzando Elementor come builder, ma le stesse regole possono essere applicate a qualsiasi sito, costruito o meno con WordPress, a patto che ci sia possibilità di modificare il CSS e di inserire degli script. Il metodo NON è testato con WIX, Squarespace o altri builder commerciali semplicemente perché non li conosco e non posso garantire sulla loro flessibilità.

Schermata di un sito web
;(

Step 1: assegnare una classe all'header

Il primo passo da compiere è quello di assegnare una classe personalizzata al nostro header. Nel caso non fosse possibile allora, utilizzando i Developers Tools (Ctrl+Maiusc+I su Windows e Command+Option+I su MacOS ), dovremo trovare una classe che contraddistingua univocamente il nostro header. Su Elementor la classe di default per gli elementi sticky è elementor-sticky, tuttavia prefersco utilizzare un selettore custom, nel caso elementor-sticky sia utilizzato da qualche altro elemento di cui non vogliamo cambiare lo sfondo.

Per questo tutorial la classe che assegnerò all'header è ilMioHeader.

Schermata di interfaccia di Elementor
Ho assegnato la classe ilMioHeader alla parte sticky dell'header

Step 2: aggiungere il codice jQuery

A questo punto l'header ha una classe personalizzata: il risultato che vogliamo ottenere è quello di cambiarne il colore di sfondo facendo in modo che una nuova classe sia aggiunga a ilMioHeader quando lo scroll supera un tot numero di pixel dal top della pagina. Per raggiungere lo scopo quello che dobbiamo fare è di inserire un piccolo script all'interno del tag <footer> del nostro sito. Per scoprire come farlo senza utilizzare plugin consiglio questo altro articolo. Perché nel footer e non nell'header? Perché il tag si trova prima nel DOM del nostro header, quindi inserendo lo script in quella posizione non succederebbe nulla.

Naturalmente queste operazioni sono consigliate solo e unicamente se stiamo utilizzando un tema child e soprattutto se, in caso di errore, possiamo facilmente accedere all'FTP per, eventualmente, rimuovere il codice e ripristinare il sito al suo stato precedente.

<script> (function($) { $(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll >= 500) { $(".ilMioHeader").addClass("nuovoSfondo"); } else { $(".ilMioHeader").removeClass("nuovoSfondo"); } }); })( jQuery ); </script>
Code language: HTML, XML (xml)

Cosa significa questo codice? In pratica quello che stiamo facendo è di dire: se scrollo più di 500px dall'inizio della pagina, aggiungi la classe nuovoSfondo alla classe ilMioHeader; viceversa, se la distanza dal top della pagina è inferiore a 500px, allora rimuovi la classe nuovoSfondo.
Per il momento non abbiamo ancora dato nessuno stile alla classe nuovoSfondo, ma possiamo verificare che effettivamente stia accadendo qualcosa utilizzando i Develper Tools.

Schermata di developers tool
La classe nuovoSfondo viene aggiunta in coda alle altre con lo scroll

Step 3: aggiungere il CSS

Come è possibile verificare nell'immagine, ora la nostra classe ilMioHeader fa in modo che, dopo 500px di scroll, alla lista delle classi di quella specifica sezione venga aggiunta una nuova classe chiamata nuovoSfondo. Al momento ancora non succede nulla, perché la classe nuovoSfondo non ha alcuno stile impostato in CSS. Per fare in modo che questo avvenga dovremo ora modificare il nostro foglio di stile.
Dove aggiungere il codice dipende dal builder che stiamo utilizzando: su Elementor come su Oxygen Builder esiste una sezione apposita, così come generalmente è possibile aggiungere custom CSS in Temi > Personalizza > CSS aggiuntivo. Altimenti è possibile copiarlo e incollarlo nel file functions.php del nostro tema child.

.ilMioHeader { background-color: rgba(5, 73, 231, 0); } .ilMioHeader.nuovoSfondo { background-color: rgba(5, 73, 231, 1); }
Code language: CSS (css)

Cosa abbiamo fatto? Abbiamo impostato per ilMioHeader un colore azzurro in rgba, dandogli però opacità 0, perché vogliamo che il suo stato iniziale sia comunque di trasparenza. Dopodiché abbiamo impostato questa condizione: se ad ilMioHeader si aggiunge la classe nuovoSfondo allora l'opacità del nostro colore diventa 1. Qui sotto il risultato.

Nuovo header
Lo script funziona, ma la transizione lascia a desiderare

Step 4: aggiungiamo una transizione

Abbiamo verificato di non aver rotto il sito e che il nostro script funzioni come inteso, però la transizione tra lo stato a e lo stato b lascia un po' il tempo che trova: questo perché non abbiamo impostato nessuna transizione nel nostro CSS: quello che ci rimane da fare è di rendere il tutto un po' più piacevole inserendo una transition e un timing per la transition nel nostro custom CSS.

.ilMioHeader { background-color: rgba(5, 73, 231, 0); transition: all .5s ease-in-out } .ilMioHeader.nuovoSfondo { background-color: rgba(5, 73, 231, 1); }
Code language: CSS (css)

Così facendo abbiamo imposto una transizione della durata di mezzo secondo (.5s) per tutte (all) le transizioni di ilMioHeader e con una transition-timing-function settata su ease-in-out. Ora la transizione è molto più piacevole e la pagina più professionale.

Risultato finale
Il risultato finale
Share