In this tutorial, we will show you how to detect whether you scroll up or down using jQuery which will allow you to perform an action based on the direction of scrolling.

Here is how you can achieve this with few very lines of 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;
		 }
	 });
 });

The code above is based on three variable lastScrollTop, nowScrollTop and delta.

• lastScrollTop: This variable stores the last Y-position of website window, and by the last position we mean the number of pixels hidden from view above scrollable area. The initial value of this variable is set to 0 as the scroll bar is at the very top.
• nowScrollTop: This variable stores the number of pixels that are hidden above the scrollable area right now as you are scrolling.
• delta: delta is like a threshold, it is a variation by which we need scroll detection to occur. for example you might not like the scroll detection function to run when a user scrolls accidentally like around 4px. So we set delta variable to 5px which will prevent accidental or very small scrolling that usually happens on touch screens.

Now we know what the variables are, here is the code explained line by line:-

• $(function(){…}) will run the code once document is ready.
• var lastScrollTop = 0, delta = 5; sets the value of two variables.
• $(window).scroll(function(){…}) runs code enclosed inside it when user scrolls window.
• var nowScrollTop = $(this).scrollTop(); sets value of third variable, which is equal to the value of scrolling that occurred.
• if(Math.abs(lastScrollTop – nowScrollTop) >= delta){…} runs the code inside it only if absolute difference between lastScrollTop and nowScrollTop is less than delta (i.e. 5px). We are taking positive value because the distance between to scrolling values is always positive (its scaler).
• if (nowScrollTop > lastScrollTop){…} if current scrolling value is greater than last scroll value then downward scrolling is occurred and will run the code inside this statement.
• else upward scrolling is occurred.
• Finally we set the lastScrollTop = nowScrollTop; because now the last scroll value become the previous nowSrollTop value.

I hope this helps!