Question

I’m trying to trigger a function when the window is scrolled more than a certain number of pixels.

Here’s my code:

$(window).scroll(function(){
  if( $(this).scrollTop() >= 100 ) {
    someFunction();
  } else {
    someOtherFunction();
  }
});

It kinda works, but there’s either a delay of around 2-4 seconds after scrolling before the function(s) are fired or else the functions aren’t triggered at all.

Tried it out in Safari / Chrome. Don’t know if that helps or not!

Answer 1

The code looks fine and works for me.

As Wolfram says, it’s rarely a good idea to attach handlers directly to the scroll event, as this fires a lot and can bring the user’s system to a crawl.

I’d recommend using Ben Alman’s jquery throttle/debounce plugin.