Question

我使用下面的代码根据用户滚动的方向添加/删除一个类。截至目前，只要用户从点0向下滚动，该类就会被添加。当用户向下滚动至少X个像素量时，我希望添加该类。我尝试更改0变量中的lastScrollTop，但它没有用。有人可以帮助我吗？

var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       $('#masthead').addClass('unpinned');
   } else {
      $('#masthead').removeClass('unpinned');
   }
   lastScrollTop = st;
});

注意：设置代码，以便在用户从任何点开始向上滚动时立即删除该类。我想保留这方面的内容。

Answer 1

这对你有用

var scrollLimit = 600;
var lastScrollTop;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
    console.log(st,lastScrollTop);
   if (st > scrollLimit){
       $('#masthead').addClass('unpinned');
   } 
   if(st < lastScrollTop){
      $('#masthead').removeClass('unpinned');
   }
    lastScrollTop = st;
});

DEMO

Answer 2

您需要做的就是在if语句中包装jQuery addClass调用，检查st的大小，如下所示：

    if(st > 2000) $('#masthead').addClass('unpinned');

只有在用户向下滚动2000px时才会添加该类。

当用户向下滚动X个像素量时，将类添加到div

2 个答案: