Jquery 更改滚动上的div不透明度

我如何使它在向下滚动页面时，下一个DIV在上一个DIV的上方淡出

为了更好地说明这一点，我设置了这把小提琴：
例如，如果你在页面的一半，背景是蓝色的

编辑：这里是JSFIDLE的内容，以防它爆炸，而有人遇到类似的问题

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

html、正文、红色、绿色、蓝色{高度：100%}
#容器{高度：300%}
#红色、绿色、蓝色{
位置：固定；
排名：0；
宽度：100%；
}
#红色{背景：红色；z索引：5}
#蓝色{背景：蓝色；z索引：4}
#绿色{背景：绿色；z索引：3}​    
​

您可以这样做：

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值

除以

背景div数-1

，将滚动值映射到需要定位的背景div。这个数字是一个背景div必须覆盖的滚动范围。然后，通过使用

滚动值

模数

滚动范围

，计算该div的滚动百分比，这样就可以得到目标div的一个介于1和0之间的值

---

然后将目标div设置为计算值，下面的div的不透明度为1，上面的div的不透明度为0（因为之前它们的范围为1到0）

此解决方案可以改进，使其更通用，但这只是一个开始

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

  });

$（文档）.ready（函数（）{
var colordivs=$（“#容器div”）；
$（文档）。滚动（功能（e）{
var scrollPercent=（$（窗口）.scrollTop（）/$（'#容器'）.outerHeight（））*100；
如果（滚动百分比>0）{
如果（滚动百分比<33）{
变量不透明度=1-（百分比/33）；
$（colordivs[0]）.css（'opacity'，opacity）；
}
否则如果（滚动百分比>66）{
变量不透明度=1-（百分比/100）；
$（colordivs[0]）.css（'opacity'，0）；
$（colordivs[1]）.css（'opacity'，0）；
$（colordivs[2]）.css（'opacity'，opacity）；
}
否则如果（滚动百分比>33）{
变量不透明度=1-（百分比/66）；
$（colordivs[0]）.css（'opacity'，0）；
$（colordivs[1]）.css（'opacity'，opacity）；
}
}
});
});

我认为你需要玩弄数学。。将目标..css（'opacity'，scrollPercent）替换为$（“#red”）.css（'opacity'，scrollPercent/3）$（“蓝色”）.css（“不透明度”，滚动百分比/2）$（“#绿色”）.css（‘不透明度’、滚动百分比）；看看这是否有帮助。请始终在问题中包含相关代码。外部链接很好，但如果它们不存在，你的问题对其他人应该仍然有用。这只是为了说明，因为我找不到合适的词语来描述它。但我明白你的意思；后更新。谢谢。一个小问题是，由于某种原因，它在最底部跳到了蓝色。@James Montagne这是计算divIndex值的一个问题。现在用地板把它修好了。@A.M.K.事实上，只有5个左右是我的：）邪恶！很好的解决方案，谢谢。顺便说一句，我只在170号编辑处捡到了那把小提琴；）不客气！啊哈，这解释了很多：）我注意到了180，认为很多人都在做这个！