jquery - JQuery .scroll - 如何检索向下或向上滚动页面的距离？

Question

我的网页顶部有一个位置固定导航。Nav 也有一个下拉菜单，它会向下滑动并保持向下，直到再次单击它。

我想要实现的是，如果子菜单打开，并且用户决定向下滚动页面，子菜单将自动关闭。

我目前拥有的是：

$(document).scroll(function() {

$(".subMenu").slideUp(300);

 });

但是这种方法非常敏感，只需轻轻滚动即可关闭下拉菜单。

理想情况下，我可以在向上或向下滚动 300 像素后让菜单向后滑动，这样就有了某种“缓冲”空间。

Answer 1

您可以使用 jquery$(window).scrollTop()来确定当前位置。我创建了一个简单的示例来演示它。

var lastFixPos = 0;
var threshold = 200;

$(window).on('scroll', function(){
  var diff = Math.abs($(window).scrollTop() - lastFixPos);
  if(diff > threshold){
    alert('Do something');
    lastFixPos = $(window).scrollTop();
  }
});

在采取行动之前，您可以更改threshold以增加/减少灵敏度。

Answer 2

如果没有 jQuery，你可以实现同样的事情：

var winPos = {
    y: 0,
    yDiff: 0,
    moveY: function(diff) {
      this.yDiff = -(this.y - diff);
      this.y = diff;
    }
};

window.onscroll(function(){
    var threshold = 10;
    winPos.moveY(window.scrollTop);
    // Check against position
    if (winPos.y > threshold) {
        // Do something
    }
    // Check against difference
    if (winPos.yDiff > threshold) {
        // Do something
    }
});