滚动时更改div不透明度

我怎样才能这样做，当你向下滚动页面时，下一个DIV会在之前的顶部消失？

我已经设置了这个小提琴来更好地说明它： http ： //jsfiddle.net/meEf4/176/
因此，例如，如果您在页面的中间位置，则背景为蓝色。

编辑：这是jsFiddle的内容，万一爆炸，有人遇到类似的问题。

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

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

使用maxScroll value除以the number of background divs - 1将滚动值映射到需要定位the number of background divs - 1 。 此数字是一个背景div必须覆盖的滚动范围。 然后，通过使用scroll value模数the scroll range来计算该div的滚动百分比，这样您就可以获得目标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); } } }); });