jQuery window scroll event. For every XX pixels scrolled

Question

I am using the excellent jQuery Reel plugin (http://jquery.vostrel.cz/reel) for a project. I would like to bind to the window scroll event, so when the user scrolls down the page the plugin advances 1 frame for say every 10px scrolled, if the user scrolls up the animation is reversed.

The plugin has methods I can pass the values to no problem and I know how to bind to the window scroll event. What I am struggling with is the last.

How can I use jQuery/JavaScript to say for every 10 pixels scrolled in any vertical direction advance 1 frame in the animation? I know I can store the window scroll in a variable but I'm unsure how to say every time it hits a multiple of 10 advance one frame.

Many thanks in advance.

EDIT

Thanks to help of the users below I worked out a solution. As follows:

$(window).scroll(function()
{
    windowScrollCount   = $(this).scrollTop();
    animationFrame      = Math.round(windowScrollCount / 100);
});

So here I am getting the scrolled distance in windowScrollCount, translating it into frames in animationFrame and setting it back with .reel("frame", animationFrame); I am actually doing this for every 100 frames as every 10 was to quick.

Answer 1

Thanks to help of codef0rmer and noShowP I worked out a solution. As follows:

$(window).scroll(function()
{
    windowScrollCount   = $(this).scrollTop();
    animationFrame      = Math.round(windowScrollCount / 100);
});

So here I am getting the scrolled distance in windowScrollCount, translating it into frames in animationFrame and setting it back with .reel("frame", animationFrame); I am actually doing this for every 100 frames as every 10 was to quick.

Answer 2

If I'm wrong then you might want this:

var jump = 500;  // consider this is your 10px 
window.scrollHeight = 0;
$(window).scroll(function () {
   console.log($(this).scrollTop());
   var diff = $(this).scrollTop() - window.scrollHeight;
    if (diff >= jump) {
       window.scrollHeight = $(this).scrollTop();   
       console.log('reload frame');
    }
});   

Demo : http://jsfiddle.net/Dyd6h/

Answer 3

You could possible have a sticky element to the top of your page,

position: fixed; top 0; left: 0;

(hidden if you like).

And then when you are scrolling you can monitor its offset:

$('element').offset().top

You can then see how far down the page you have scrolled, so every time they scroll see what its top value is and trigger events appropiately?

EDIT:

I've set up a little JSfiddle with a start of what I think you need.

http://jsfiddle.net/qJhRz/3/

Im just calculating the frame you need to be on and storing that in a variable. Is it anything like what you're looking for?