jQuery: rendere fisso un menu durante lo scroll

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

Definiamo subito gli stili CSS:

.fixed {
	position: fixed;
	width: 100%; /* Evita il restringimento shrink-to-fit */
	top: 0;
	left: 0;
	z-index: 100000; /* Evita la sovrapposizione */
	background: #fff; /* Evita la trasparenza */
}

Con jQuery dobbiamo verificare che lo scroll abbia superato un dato valore, in questo caso l'altezza del menu:

(function( $ ) {
	$.fn.fixedMenu = function( options ) {
		options = $.extend({
			cssClass: "fixed"
		}, options);
		
		var onScroll = function( element, elHeight, scroll ) {
			if( scroll > elHeight ) {
				element.addClass( options.cssClass );
			} else {
				element.removeClass( options.cssClass );	
			}
		};
		
		return this.each(function() {
			var $menu = $( this ),
				height = $menu.outerHeight();
				
				$( window ).on( "scroll", function() {
					var top = $( this ).scrollTop();
					onScroll( $menu, height, top );
				});
		});
	};
	
})( jQuery );

Esempio d'uso:

$(function() {
	
	$( "#navigation" ).fixedMenu();
	
});