使用jQuery实现向上滚动时执行某些操作，向下滚动时执行其他操作

Question

我想在我的网站上添加一个小向下箭头，当用户向下滚动时，显示向下箭头，当用户向上滚动时，显示向上箭头。

我唯一做到的事情就是这个：

$(document).ready(function(){
    $(window).scroll(function () {
        $("#bottomArrow").show(); 
        setTimeout(function(){ $("#bottomArrow").fadeOut() }, 2000);
    });
}); 

这里需要实现的是只识别“滚动”，而不是上下滚动。

我该如何使用jQuery实现这个功能？

- user282294

Answer 1

您需要检查 $(document).scrollTop() 改变的方式。您可以这样做：

$(function() {

    var prevScroll = $(document).scrollTop();

    $(window).scroll(function() {
        var newScroll = $(document).scrollTop();
        if(newScroll < prevScroll) {
            // Scrolled up
        } else {
            // Scrolled down
        }
        prevScroll = newScroll;
    });
});

Testcase here:

http://jsbin.com/arazu3/

- Tatu Ulmanen