Question

任何人都知道如何在向下滚动期间向元素添加类，然后在向上滚动期间添加其他类？

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

谢谢，

斯科特。

Answer 1

您可以通过检查窗口的滚动顶部并使用scroll event将其与上一个滚动顶部进行比较来检查它们是向下还是向上滚动。 debounce it for efficiency reasons

(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);

在向上和向下滚动期间添加css类

1 个答案: