jQuery: trasformare un menu statico in un menu fisso quando l'utente scrolla la pagina

  • jQuery
  • Gabriele Romanato

Un effetto visuale molto comune è quello che trasforma un menu statico in un menu fisso dopo che l'utente ha scrollato la pagina verso il basso. La soluzione con jQuery è molto semplice.

Definiamo una classe CSS specifica:


#menu.fixed {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000000;
}

Con jQuery abbiamo bisogno di un elemento di riferimento da usare per stabilire quando applicare la classe CSS:


var $menu = $( "#menu" ),
	$header = $( "#header" ), // Elemento di riferimento
	headerHeight = $header.outerHeight(); // Valore di riferimento

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

});

Ovviamente è possibile modificare l'elemento di riferimento ed il suo valore per ottenere un effetto diverso.

Torna su