Neste tutorial, vou mostrar como detectar se o utilizador está a fazer scroll para cima ou para baixo, utilizando jQuery, o que permite levar a cabo acções baseadas na direcção do scroll.

Conseguimos fazer isto apenas com algumas linhas de jQuery:

 $(function(){
	 var lastScrollTop = 0, delta = 5;
	 $(window).scroll(function(){
		 var nowScrollTop = $(this).scrollTop();
		 if(Math.abs(lastScrollTop - nowScrollTop) >= delta){
		 	if (nowScrollTop > lastScrollTop){
		 		// ACTION ON
		 		// SCROLLING DOWN 
		 	} else {
		 		// ACTION ON
		 		// SCROLLING UP 
			}
		 lastScrollTop = nowScrollTop;
		 }
	 });
 });

O código acima é baseado em três variáveis: lastScrollTop, nowScrollTop e delta.

• lastScrollTop: Esta variável armazena a última posição Y da janela do website, e por última posição queremos dizer o número de pixels oculto da visualização acima da área de scroll. O valor inicial desta variável é definido por 0 quando a barra de scroll está no topo.
• nowScrollTop: Esta variável armazena o número de pixels que estão escondidos acima da área de scroll no preciso momento em que o utilizador está a navegar na página.
• delta: O delta é como um limite, é uma variação que necessita da detecção de scroll para ocorrer. Por exemplo: você pode não gostar de ter a função de detecção de scroll a correr quando o utilizar faz scroll acidentalmente, por exemplo, cerca de 4 px abaixo. Por isso definimos a variável delta a cerca de 5 px, o que vai evitar scrolls curtos ou acidentais que costumam acontecer em ecrãs touch.

Agora que sabemos o que significa cada variável, aqui está o código explicado linha a linha:

• $(function(){…}) corre o código quando o documento está pronto.
• var lastScrollTop = 0, delta = 5; define o valor de duas variáveis.
• $(window).scroll(function(){…}) executa o código incluído na função quando o utilizador faz scroll na janela.
• var nowScrollTop = $(this).scrollTop(); define o valor da terceira variável, que é igual ao valor de scroll que ocorreu.
• if(Math.abs(lastScrollTop – nowScrollTop) >= delta){…} executa o código abaixo apenas se a diferença absoluta entre lastScrollTop e nowScrollTop é inferior ao delta (i.e. 5px). Estamos a falar de um valor positivo porque a distância entre valores de scroll é sempre positiva (é uma quantidade escalar).
• if (nowScrollTop > lastScrollTop){…} se o valor de scroll no momento é superior ao último valor de scroll, então ocorreu um movimento para baixo, o que vai executar o código dentro desta função.
• o mesmo quando ocorreu scroll para cima.
• Finalmente definimos o valor lastScrollTop = nowScrollTop; porque agora o último valor de scroll torna-se o nowScrollTop value.

Espero ter ajudado!