Pretty simple:
jQuery(function($) {
$( window ).handleScroll(function() {
// going up
}, function() {
// going down
}, {
debug: true // Defaults to false
});
});| jQuery.fn.handleScroll = (upHandler, downHandler, options) => { | |
| options = options || {}; | |
| options.debug = options.debug || false; | |
| /** | |
| * Window object. | |
| */ | |
| const $Window = this; | |
| /** | |
| * States if the document is already loaded. | |
| */ | |
| let isLoaded = false; | |
| jQuery(document).ready(() => { | |
| isLoaded = true; | |
| if (options.debug) { | |
| console.log("[handleScroll] Window loaded"); | |
| } | |
| }); | |
| let lastScrollTop = 0; | |
| $Window.on("scroll", () => { | |
| if (!isLoaded) { | |
| return; | |
| } | |
| const scrollTop = $Window.scrollTop(); | |
| if (scrollTop > lastScrollTop) { | |
| if (options.debug) { | |
| console.log("[handleScroll] Window scrolling down"); | |
| } | |
| downHandler(); | |
| } else { | |
| if (options.debug) { | |
| console.log("[handleScroll] Window scrolling up"); | |
| } | |
| upHandler(); | |
| } | |
| lastScrollTop = scrollTop; | |
| }); | |
| }; |
| "use strict";jQuery.fn.handleScroll=function(a,b,c){c=c||{},c.debug=c.debug||!1;var d,e=!1;jQuery(document).ready(function(){e=!0,c.debug&&console.log("[handleScroll] Window loaded")});var f=0;d.on("scroll",function(){if(e){var g=d.scrollTop();g>f?(c.debug&&console.log("[handleScroll] Window scrolling down"),b()):(c.debug&&console.log("[handleScroll] Window scrolling up"),a()),f=g}})}; |