jQuery: rendere un header fisso durante lo scroll

Rendere un header fisso durante lo scroll è semplice con jQuery.

Creiamo la seguente classe CSS:

.fixed {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
}

Il codice jQuery è il seguente:

var $header = $( "#header" );
var headerHeight = $header.height();

$( window ).on( "scroll", function() {
	var top = $( this ).scrollTop();
	if( top > headerHeight ) {
		$header.addClass( "fixed" );
	} else {
		$header.removeClass( "fixed" );
	}
});