JQuery window scroll event. For every XX pixel it scrolls

Question

I am using the excellent jQuery Reel plugin ( http://jquery.vostrel.cz/reel ) for the project. I would like to be attached to the window scroll event, so when the user scrolls down the page, the plugin moves 1 frame, say, every 10 pixels scroll, if the user scrolls the animation, it is canceled.

The plugin has methods with which I can pass values ​​without problems, and I know how to bind to a window scroll event. What I'm struggling with is the last.

How can I use jQuery / JavaScript for every 10 pixels that scroll vertically in any direction, forward 1 frame in the animation? I know that I can store the scrolling of a window in a variable, but I'm not sure how to say it every time it falls into several of 10 advanced frames.

Thank you very much in advance.

EDIT

Thanks to the help of users below, I developed a solution. As below:

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

So, I get a scrollable distance in windowScrollCount, translating it into frames in animFrame and setting it back with .reel ("frame", animationFrame); I actually do this for every 100 frames, as every 10 will be fast.

Answer 1

Thanks to the help of codef0rmer and noShowP, I developed a solution. As below:

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

So, I get a scrollable distance in windowScrollCount, translating it into frames in animFrame and setting it back with .reel ("frame", animationFrame); I actually do this for every 100 frames, as every 10 will be fast.

Answer 2

If I am mistaken, you may need the following:

 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 may have a sticky item at the top of the page,

position: fixed; top 0; left: 0;

(hidden if you want).

And then when you scroll, you can control its offset:

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

Then you can see how far down the scrolled page is, so every time they scroll, see what the top value is, and fire events accordingly?

EDIT:

I created a bit of JSfiddle with the start of what you think you need.

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

Im just calculating the frame you need to include and storing it in a variable. Is this something like what you are looking for?