jQuery: come creare effetti precisi sullo scroll della pagina

La soluzione consiste nell'impedire che si creino code di effetti sia in jQuery che con le classi CSS.

La soluzione è la seguente:

function debounce( func, wait, immediate ) {
	var timeout;
	return function() {
		var context = this, args = arguments;
		var later = function() {
			timeout = null;
			if ( !immediate ) { 
				func.apply( context, args );
			}
		};
		var callNow = immediate && !timeout;
		clearTimeout( timeout );
		timeout = setTimeout( later, wait );
		if ( callNow ) { 
			func.apply( context, args );
		}
	};
};

Esempio d'uso:

$( window ).on( "scroll", function() {
    debounce(function() {
        //...
    }, 300);
});