jQuery 滚动事件行为

Question

我有一个关于滚动事件的一般性问题。

假设我有一个名为 .notification 的 div。当用户滚动超过 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>

有没有一种方法可以这样写，使其像“不要添加 ns--hide 除非用户滚动超过 500，然后向上滚动不到 500”

注意:我不能简单地删除同一个类 ns--show，因为我正在使用 css 转换/转换来改变 div 在 hide 类上的外观。

编辑:

我根据下面的帖子想出了一个解决方案:

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

class-added 是一个标志，可帮助您了解滚动何时超过 500px。

希望对您有所帮助。

问候。