JavaScript: rendere fisso l'header di una pagina durante lo scroll

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.