Javascript 在用户滚动上设置元素动画

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

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

---

这就是解决办法。必须修改逻辑以检测用户是否向下滚动或向上滚动

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

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