jQuery: gestire gli header sticky in modo dinamico

jQuery
22/04/2021
Gabriele Romanato

In jQuery possiamo rendere un header sticky in modo dinamico.

La soluzione è la seguente:


var win = $( window );
var $stickyHeader = $( "#sticky-header" );

win.on( "scroll", function () {

    var top = win.scrollTop();

    if( top < 100 ) {
        $stickyHeader.removeClass( "sticky" );
    } else {
        $stickyHeader.addClass( "sticky" );
    }
});