问题
If you're here by way of my Skrollr.js: Looping action that will happen all the time while user is scrolling window question, then you know basically what's going on.
Skrollr, which is the plugin I'm using, cannot handle an infinite looping action. So the recommendation made by @Prinzhorn was to use the "modulus operator". And I tried that out, as you can see HERE. However, that posed another problem, as you can also see there, due to the fact that I need an event to occur (the animation) every Nth number of pixels scrolled. But the scroll never passes over every single number; it skips over a lot of them. So, up to now, I can't figure out how to get a constant interval from there.
At any rate, this problem and the fact that perhaps it's not such a good idea to have some action (or rather, many actions) occurring always, ad infitium, even when that which they are affecting is not in the viewport.
So I decided to try and dynamically set data values for my initial Skrollr. These data values will, to the best of my abilities, work themselves out through jQuery according to window height and position in content, etc., etc. So, very quickly, I set up this small JS code (jsFiddle 1) that appends the different layers to be animated wherever they need to be appended and with data intervals set up that should take care of their action when they are in viewport. HOWEVER, I've yet to figure out how to get them to set CSS values according to the sequence shown below! But I'm working on it as you read this!
<div class="red" data-0="display: block;">1</div>
<div class="yellow" data-0="display: none;" data-50="display: block;" data-400="display: none;">2</div>
<div class="blue" data-0="display: none;" data-100="display: block;" data-350="display: none;">3</div>
<div class="green" data-0="display: none;" data-150="display: block;" data-300="display: none;">4</div>
<div class="purple" data-0="display: none;" data-200="display: block;" data-250="display: none;">5</div>
Notice that the sequence I'm talking about is basically that one layer should show above the other, thus animating one, two, three, four, five... and back again four, three, two, one... and up again, etc., etc.,
As I said, I'm working on this, but I've arrived at
for (i in intervals) {
layer += ' data-' + (start + intervals[i]) + '=" "';
}
And now I have to figure out how to get some of these data attributes to target CSS changes of display: block; and, other, display: none; AND THEN how to get these to be non-symmetrical, as they need to respond to the above sequence of back and forth.
UPDATE No 1
OK, this is what I'm up to at this time: SEE UPDATED FIDDLE HERE (2).
By way of the modululs I've managed to somewhat get close to what I need. Right now it's almost sequential but not quite. Any ideas?
来源：https://stackoverflow.com/questions/17013735/skrollr-js-followup-dynamically-set-attributes-according-to-window-height-y