Change div opacity on scroll

Question

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 { background:green; z-index: 3}​    
</style>

<div id="container">
    <div id="red"></div>
    <div id="blue"></div>
    <div id="green"></div>
</div>​

Solution 1

You can do it something like this:

var target = $('div.background');
var targetHeight = target.height();
var containerHeight = $('#container').outerHeight();

var maxScroll = containerHeight - targetHeight;
var scrollRange = maxScroll/(target.length-1);

$(document).scroll(function(e){
    var scrollY = $(window).scrollTop();
    var scrollPercent = (scrollRange - scrollY%scrollRange)/scrollRange;
    var divIndex = Math.floor(scrollY/scrollRange);

    target.has(':lt(' + divIndex + ')').css('opacity', 0);
    target.eq(divIndex).css('opacity', scrollPercent);
    target.has(':gt(' + divIndex + ')').css('opacity', 1);
});​

WORKING DEMO FIDDLE

You map the scroll value to the background div you need to target using the maxScroll value divided by the number of background divs - 1. This number is the scroll range that one background div has to cover. Then you calculate the scroll percentage for that div by using the scroll value modulus the scroll range, that way you get a value between 1 and 0 for the target div.

Then you set your target div to the calculated value, the divs below have opacity 1, the divs above it have opacity 0 (because they went through their range of 1 to 0 before)

Solution 2

This solution can be improved to make it more generic, but it's a start

$(document).ready(function() {

      var colordivs = $('#container div');

      $(document).scroll(function(e) {
          var scrollPercent = ($(window).scrollTop() / $('#container').outerHeight()) * 100;

          if (scrollPercent > 0) {
              if (scrollPercent < 33) {
                  var opacity = 1 - (scrollPercent / 33);
                  $(colordivs[0]).css('opacity', opacity);
              }
              else if (scrollPercent > 66) {
                  var opacity = 1 - (scrollPercent / 100);
                  $(colordivs[0]).css('opacity', 0);
                  $(colordivs[1]).css('opacity', 0);
                  $(colordivs[2]).css('opacity', opacity);
              }
              else if (scrollPercent > 33) {
                  var opacity = 1 - (scrollPercent / 66);
                  $(colordivs[0]).css('opacity', 0);
                  $(colordivs[1]).css('opacity', opacity);
              }
          }
      });

  });