Toggle behaviour while using window.scroll()

Question

I am trying to achieve this, when the user is scrolling-disable one element. When the user is not scrolling, revert the element to original state.

It is not a problem to make the first requirement, I don't know how to reverse it to previous state. Here is the code for doing something while the user is scrolling:

$(window).scroll(function(){
             $('#box').css('display','none');
         });

I tried with if-else statements, but I haven't got it to work. Here is the fiddle to see it on hand:

http://jsfiddle.net/y7ekd/

possible duplicate of [jquery - bind event on scroll stops](http://stackoverflow.com/questions/14035083/jquery-bind-event-on-scroll-stops) — Douwe de Haan, Jan 21 '14 at 15:17

score 1 · Answer 1 · answered Jan 21 '14 at 15:18

You can make it work with a little trick (timeout trick)

As scrolling is not a continuous event, it fires many times while you are scrolling

var timeout;  
$(window).scroll(function(){
       clearTimeout(timeout);
       $('#box').css('display','none');
       timeout = setTimeout(function(){
           $('#box').css('display','block');
       },200);
});

Demo ----> http://jsfiddle.net/y7ekd/1/

score 0 · Accepted Answer · answered Jan 21 '14 at 15:18

Throttle it with a timeout, the scroll event fires many, many times so it has to be throttled to avoid flickering.

$(window).on('scroll', function(){
     $('#box').hide();

     clearTimeout($(this).data('timer'));

     $(this).data('timer', setTimeout(function() {
          $('#box').show();             
     }, 300));
});

Toggle behaviour while using window.scroll()

2 Answers2