In questo articolo vedremo come rendere fisso l'header di una pagina durante lo scroll con JavaScript.
Definiamo una classe CSS con gli stili necessari.
.fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
Quindi creiamo il seguente codice JavaScript:
'use strict';
const siteHeader = document.getElementById('masthead');
const siteHeaderHeight = siteHeader.offsetHeight;
window.addEventListener('scroll', () => {
const top = document.documentElement.scrollTop || document.body.scrollTop;
if(top > siteHeaderHeight) {
siteHeader.classList.add('fixed');
} else {
siteHeader.classList.remove('fixed');
}
}, false);
In questo caso il riferimento รจ costituito dall'altezza dell'header, che viene usata in relazione al valore dello scroll verticale per aggiungere o rimuovere la classe CSS specificata.