向上或向下滚动时删除类

Question

我想要实现的是在向上或向下滚动时删除特定类或隐藏类（以避免滞后）。 我有以下代码：

var $div = $('#div');   
$div.on('mouseenter', '.box', function() {
    $(this).find('span.category').addClass('bg-category');
    $(this).find('.post-options').show();
});

和//请假：

$div.on('mouseleave', '.box', function() {
    $(this).find('span.category').removeClass('bg-category');
    $(this).find('.post-options').hide();
});

基本上，我有很多图像，当鼠标悬停在 .box 上时滚动时，它会显着滞后于页面。所以我想要实现的是不仅在“mouseleave”上而且在向上或向下滚动页面时删除这些类。

类似于 google+ 在内容卡片上滚动时，您会注意到鼠标悬停时链接会亮起，但一旦滚动，它们就会被删除。例如：https://plus.google.com/communities/100354381402619402956

Answer 1

你可以试试这个：

var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
   // downscroll code
      $("#div").find('.post-options').show();
      $(".box").delay(800).addClass('dummyclass');
   } else {
  // upscroll code
      $("#div").find('.post-options').hide();
      $(".box").delay(800).addClass('dummyclass');
  }
lastScrollTop = st;
});