jquery - スクロール時にdivの不透明度を変更する

Question

ページを下にスクロールすると、次の DIV が前の DIV の上にフェードするようにするにはどうすればよいですか?

私はそれをよりよく説明するためにこのフィドルを設定しました: http://jsfiddle.net/meEf4/176/
たとえば、ページの途中にいる場合、背景は青です。

編集: 爆発して誰かが同様の問題で立ち往生している場合に備えて、その jsFiddle の内容を次に示します。

<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>​

Answer 1

次のようにできます。

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);
});​

ワーキングデモフィドル

maxScroll value分割を使用して、スクロール値をターゲットにする必要がある背景 div にマップしますthe number of background divs - 1。この数値は、1 つの背景 div がカバーしなければならないスクロール範囲です。scroll value次に、係数を使用してその div のスクロール パーセンテージを計算しますthe scroll range。これにより、ターゲット div の 1 から 0 の間の値を取得できます。

次に、ターゲット div を計算値に設定します。下の div の不透明度は 1、上の div の不透明度は 0 です (以前に 1 から 0 の範囲を通過したため)。

Answer 2

このソリューションは、より一般的なものにするために改善できますが、それは始まりです

$(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);
              }
          }
      });

  });