Удалить класс при прокрутке вверх или вниз

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