滚动时改变div的不透明度

Question

我该如何实现这样一个效果：当你向下滚动页面时，下一个DIV会渐隐地覆盖在前一个DIV之上？

我已经设置了一个fiddle来更好地说明：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>​

- thv20

---

我认为你需要尝试一下数学计算。将目标..css('opacity', scrollPercent) 替换为 $("#red").css('opacity', scrollPercent/3); $("#blue").css('opacity', scrollPercent/2);$("#green").css('opacity', scrollPercent); 看看是否有所帮助。 - ksskr

请在您的问题中始终包含相关代码。外部链接很好，但如果它们不存在了，您的问题仍应对他人有用。 - James Montagne

这只是为了说明，因为我找不到合适的词来描述它。但我明白你的观点了，帖子已更新。谢谢。 - thv20

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

工作演示FIDDLE

您可以将滚动值映射到需要定位的背景div上，使用maxScroll value除以背景div数量-1得到目标的滚动范围。这个数字是一个背景div必须覆盖的滚动范围。接着，您可以通过使用scroll value取模scroll range来计算该div的滚动百分比，这样您可以获得一个介于1和0之间的目标div值。

然后，您可以将目标div设置为已计算的值，下面的div具有不透明度1，而上面的div具有不透明度0（因为它们在其1到0的范围内经历了一次）。

- Asciiom

---

@James Montagne 这是计算divIndex值的问题。现在通过使用floor已经解决了。 - Asciiom

@A.M.K 确实，只有大约5个是我的 :) - Asciiom

不用谢！啊哈，这解释了很多 :) 我注意到了180，以为有很多人在处理这个！ - Asciiom

还有一件事，你知道为什么这在IE中不起作用吗？我知道不支持透明度，但由于某种原因，设置过滤器不起作用。 过滤器可以直接从CSS中工作，但它们没有被内联设置！http://jsfiddle.net/meEf4/216/ - thv20

这里只有苹果电脑，得让其他人来看一下这个问题...抱歉！ - Asciiom

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

  });

- svillamayor