Question

我目前正在使用下面的逻辑为导航块设置动画。当用户滚动大于5px时，它运行良好，该元素在视口外设置动画。但是，用户必须滚动窗口的顶部顶部才能将元素动画回原位。

不是等待用户滚动到页面顶部，如何在用户向上滚动时立即触发动画功能？（不要等到他们到达页面顶部）

C = [
     [[0,0],[0]],
     [[0,1],[1]],
     [[1,0],[1]],
     [[1,1],[0]]
    ]

Answer 1

Heres是解决方案。必须修改逻辑以检测用户是向下滚动还是向上滚动。

var _throttleTimer = null;
var _throttleDelay = 100;
var lastScrollTop = 0;
var $window = $(window);
var $document = $(document);

$document.ready(function () {
    $window
     .off('scroll', ScrollHandler)
     .on('scroll', ScrollHandler);
});

function ScrollHandler(e) { 
    clearTimeout(_throttleTimer); 
    _throttleTimer = setTimeout(function () { 
        console.log('scroll');

        var st = $(this).scrollTop(); 

        if (st > lastScrollTop && $(window).scrollTop() > 5){ 
            $( ".mobile_header .content" ).animate({ 
                top: "-34px" 
            }, 100 ); 
        } else { 
            $( ".mobile_header .content" ).animate({ 
                top: "34px" 
            }, 100 ); 
        } 

        lastScrollTop = st; 
    }, _throttleDelay); 
}

用户滚动上的Animate元素

1 个答案: