Let’s see how to detect scroll up or scroll down on your page using jQuery. This action is based on the direction of scrolling.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Print PDF using inline iFrame</title>
</head>
<body style="height:1000px">
<p class="down" style="position: fixed;display: none;">Moving Down</p>
<p class="up" style="position: fixed;display: none;">Moving Up</p>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
var lastScrollTop = 0, threshold = 5;
$(window).scroll(function(){
var nowScrollTop = $(this).scrollTop();
if(Math.abs(lastScrollTop - nowScrollTop) >= threshold){
if (nowScrollTop > lastScrollTop){
$('p').hide();
$('p.down').show();
} else {
$('p').hide();
$('p.up').show();
}
lastScrollTop = nowScrollTop;
}
});
});
</script>
</html>
