上下滚动时添加css类

Question

任何人都知道如何在向下滚动过程中向元素添加一个类，然后在向上滚动过程中添加一个不同的类？

这个想法是给固定元素一种弹性类型的感觉，这样当用户向下滚动时，元素会稍微向上移动，反之亦然。

谢谢，

斯科特。

Answer 1

您可以通过检查窗口的滚动顶部并使用滚动事件将其与前一个滚动顶部进行比较来检查它们是向下还是向上滚动。 出于效率原因去抖动

(function($, window){
    var $window = $(window);
    var position = $window.scrollTop();
    var timeout;

    var debounce = function(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);
        };
    };

    var checkPosition = function () {
        if(timeout !== null){
            //this will cancel the timeout if this function is called within 200ms
            clearTimeout(timeout);
        }

        var scrollTop = $window.scrollTop();

        if (scrollTop > position) {
            //scrolling down
        } else {
            //scrolling up
        }

        position = scrollTop;

        //this function will fire if the user stops scrolling for 200ms
        timeout = setTimeout(function(){
            //user stopped scrolling
        }, 200);
    };

    var debouncedScroll = debounce(checkPosition, 50);

    $window.on('scroll', debouncedScroll);
})(jQuery, window);