Question

我对滚动事件有一般性质疑。

假设我有div名为.notification。当用户滚动超过500时，我想添加一个类.ns--show。如果它们小于500，我想添加类.ns--hide，但前提是用户已滚动超过500。

这是jQuery代码

$(window).scroll(function(){

  var st = $(this).scrollTop();

  if (st >= 500) {
   $('.notification').addClass('ns--show');
  } else {
   $('.notification').removeClass('ns--show').addClass('ns--hide');
  }
});

我遇到的问题是，当浏览器加载时，scrollTop为0.因此，它会在加载时立即添加类.ns--hide，并且dom看起来像：

<div class="notification ns--hide"></div>

有没有办法写这个，以便它像＆＃34;不要添加ns--hide，除非用户滚动超过500，然后向上滚动少于500＆＃34;

注意：我不能删除相同的类ns--show，因为我正在使用css过渡/转换来改变div在隐藏类上的显示方式。

编辑：

我想出了一个基于以下帖子的解决方案：

if (st >= 500) {
 if ($('.notification').hasClass('ns--hide')) {
  $('.notification').removeClass('ns--hide').addClass('ns--show');
 } else {
  $('.notification').addClass('ns--show');
 }
 } else {
  if ($('.notification').hasClass('ns--show')) {
   $('.notification').removeClass('ns--show').addClass('ns--hide');
  }
 }
}

Answer 1

您可以使用标记表示已添加 ns-show 类。

例如：

$(window).scroll(function(){

  var st = $(this).scrollTop();

  if (st >= 500) {
   $('.notification').removeClass('ns--hide');.addClass('ns--show class-added');
  } else {
   if($('.notification').hasClass('class-added'))
     $('.notification').removeClass('ns--show class-added').addClass('ns--hide');
  }
});

类添加是一个标志，可帮助您了解滚动时间是否超过500px。

希望它有所帮助。

问候。

jQuery滚动事件行为

1 个答案: