javascript - 检测用户滚动是否超过 20px，无论其在页面上的哪个位置

Question

是否可以检测用户在页面上的任何位置滚动是否超过 20px？

我的意思是，在单页设计中，当用户滚动超过 20 像素时，我需要删除一个类，而不仅仅是从文档顶部。

每次他打开弹出窗口时，都会将一个类添加到相关弹出窗口中，一旦用户滚动，我想删除该类。

无论页面上的哪个位置都重复此函数。

我当前的代码:

$(window , 'body').on('scroll', function() {
    $('.navbar-collapse').collapse('hide');
    $("#wrapper").removeClass('newsletter-opened');
        $("#newsletter").removeClass('opened');
});

谢谢!

Answer 1

您可以使用 jQuery 来实现这一点。

根据我的解决方案，如果用户在进入您的页面时滚动了 200px，如果他以最小 20px 的滚动滚动到顶部或底部，则会调用您的更改。

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

$(window).on('scroll', function() {
   var newScroll = $(document).scrollTop();
   if(userScroll - newScroll > 20 || newScroll - userScroll > 20){
      $('.navbar-collapse').collapse('hide');
      $("#wrapper").removeClass('newsletter-opened');
      $("#newsletter").removeClass('opened');
   }
}

编辑:

查看你的 jsFiddle 后，我知道你想要什么，只需检查一下:

只需在 popin 启用时定义滚动，并仅在 popin 具有类 opened 时才进行工作

$(document).ready(function(){   
    $("a.open-newsletter").on( "click", function() {
        $("#newsletter").toggleClass('opened');
        userScroll = $(document).scrollTop();
        return false;
    });

    $(window , 'body').on('scroll', function() {
        if ( $("#newsletter").hasClass('opened') ) {
            var newScroll = $(document).scrollTop();
            if (userScroll - newScroll > 100 || newScroll - userScroll > 100) {
                $("#newsletter").removeClass('opened');
            }
        }
    });
});