Change div opacity on scroll
How can I make it so that when you scroll down the page, the next DIV fades on top of the previous? I've set up this fiddle to illustrate it better: http://jsfiddle.net/meEf4/176/ So for example if you're halfway down the page, the background is blue. Edit: Here's the contents of that jsFiddle, in case that ever explodes and somebody is stuck with a similar issue. <style> html, body, #red, #green, #blue { height: 100%} #container { height: 300%} #red, #green, #blue { position: fixed; top: 0; width: 100%; } #red { background:red; z-index: 5} #blue { background:blue; z-index: 4} #green {