jQuery onScroll() show and hide DIVs

Question

I have a simple onScroll function, which shows a DIV when the scroll (down) height is 100 for example, and then if scrolled up soon as it reach 100 it hides the div, works perfect.

However, if I scroll down quickly and while its showing the DIV if I quickly scroll up & down 2 three times, it doesn't catch the event, even if its up again, it still shows the DIV, but again if I scroll even 1 pixel down, it hides it and if reaches 100 then it shows DIV again.. I hope I made it clear, I dont have an online demo as I am working on localhost.. below is my function that I am using standalone in the template within just <*script> tag..

  jQuery(document).scroll(function ($) {

      var y = jQuery(this).scrollTop();    
      var hoffset = 100;

      if (y > hoffset) {
          // show div
      } else {
          // hide div
      }
  });

Can someone please guide me to right direction, what other best approaches can be done for this, basically I am doing this for header nav div..

regards

Answer 1

Do you want like this? See my Fiddle

I use fadeIn() and fadeOut() instead.

Answer 2

我发现停止动画的唯一方法是在动画制作过程中进行操作。

 jQuery('.thedivclass').stop(false, true).slideDown();