在滚动时更改 div 不透明度答案

【问题标题】：Change div opacity on scroll在滚动时更改 div 不透明度
【发布时间】：2012-09-07 16:31:28
【问题描述】：

我怎样才能使当您向下滚动页面时，下一个 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>

【问题讨论】：

我认为你需要玩弄数学.. 用 $("#red").css('opacity', scrollPercent/ 替换 target..css('opacity', scrollPercent) 3); $("#blue").css('opacity', scrollPercent/2);$("#green").css('opacity', scrollPercent);看看有没有帮助。
请始终在您的问题中包含相关代码。外部链接很棒，但如果它们不复存在，您的问题应该对其他人仍然有用。
这真的只是为了说明，因为我找不到合适的词来形容它。但我明白你的意思；帖子更新了。谢谢。

标签： jquery scroll opacity

【解决方案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);
});

WORKING DEMO FIDDLE

您使用maxScroll value 除以the number of background divs - 1 将滚动值映射到您需要定位的背景div。这个数字是一个背景 div 必须覆盖的滚动范围。然后使用scroll value 模数the scroll range 计算该div 的滚动百分比，这样就可以得到目标div 的1 到0 之间的值。

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

【讨论】：

一个小问题是它出于某种原因在最底部跳到蓝色。
@James Montagne 这是计算 divIndex 值的问题。现在用地板解决了。
@A.M.K 确实，只有 5 个左右是我的 :)
邪恶！很好的解决方案，谢谢。顺便说一句，我只在编辑号 170 时才拿起那个小提琴；）
不客气！啊，这解释了很多 :) 我注意到 180 并且认为很多人都在研究这个！

【解决方案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);
              }
          }
      });

  });

【讨论】：