Question

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

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

我目前拥有的是：

$(document).scroll(function() {

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

 });

但是这种方法很敏感，只需稍微滚动即可关闭下拉。

理想情况下，我可以在向上或向下滚动300px后重新启动菜单，以便有一些“缓冲”空间。

Answer 1

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

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

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

2 个答案: