用户滚动上的动画元素

Question

我目前正在使用以下逻辑为导航块设置动画。当用户滚动大于 5px 时效果很好，元素动画离开视口。但是，用户必须滚动到 window 的顶部，元素才能动画回到原位。

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

    var _throttleTimer = null;
    var _throttleDelay = 100;
    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');

            if($(window).scrollTop() > 5) {
                $( ".mobile_header .content" ).animate({
                    top: "-34px"
                  }, 100 );
            } else {
                ////Need help here
                $( ".mobile_header .content" ).animate({
                    top: "34px"
                  }, 100 ); 
            }

    }, _throttleDelay);
}

Answer 1

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

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 element on user scroll

javascript

scroll

if-statement

scrolltop

jquery-animate