jquery - 当用户滚动超过 10px 时如何运行函数？

Question

我正在尝试找到一种在用户滚动时触发功能的方法。但只有当用户滚动超过 x 量(比如 10 像素)时，才能避免意外/微小的页面滚动。

我目前有一个横跨页面顶部的固定导航栏。当用户向下滚动时，添加类“retreat”，隐藏导航栏。当用户向上滚动时，类 'retreat' 被删除:

$(function(){
    var previousScroll = 0;
    navOffset = $('nav').height()
});

$(window).scroll(function () {
    var currentScroll = $(this).scrollTop();
    if (currentScroll > navOffset) {
        if (currentScroll > previousScroll) {
            $('nav').addClass("retreat");
        } else {
            $('nav').removeClass("retreat");
        }
    } 
    previousScroll = currentScroll;
});

但是，这经常会在鼠标最轻微的触摸或移动时意外运行。有没有办法忽略非常小的滚动，只在用户滚动超过 10px 时才运行该函数？

查看此 fiddle 以获得工作演示:http://jsfiddle.net/mymymy/An3LZ/

Answer 1

只需额外检查两个滚动位置之间的差异(40 是单击滚动条上的向上/向下滚动图标在 Chrome 中移动页面的像素数量，如您所见更改适合):

Demo Fiddle

将您的 JS 更改为以下内容:

var previousScroll = 0,
    navOffset = $('nav').height()

$(window).scroll(function () {

    var currentScroll = $(this).scrollTop();
    if (currentScroll > navOffset) {
        if (Math.abs(currentScroll - previousScroll) > 40) {
            if (currentScroll > previousScroll) {
                $('nav').addClass("retreat");
            } else {
                $('nav').removeClass("retreat");
            }
        }
    }
    previousScroll = currentScroll;
});