在滾動上更改div不透明

我該如何做到這一點，以便當您向下滾動頁面時，下一個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>

來源

2012-09-14 thv20

我認爲你需要玩的數學..用$代替target..css（「不透明」，scrollPercent）（「＃紅」） .css（'opacity'，scrollPercent/3）; $（「＃blue」）.css（'opacity'，scrollPercent/2）; $（「＃green」）。css（'opacity'，scrollPercent）;看看是否有幫助。 – ksskr

請始終在您的問題中包含相關代碼。外部鏈接很好，但如果它們不復存在，你的問題應該對其他人有用。 –

這真的只是爲了說明，因爲我找不到適當的詞來描述它。但我明白你的觀點;發佈更新。謝謝。 – thv20

你可以做這樣的事情：

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必須覆蓋的滾動範圍。然後你通過使用模數the scroll range來計算該div的滾動百分比，這樣你就可以得到1和0之間的值作爲目標div。

然後你你的目標DIV設置爲計算值，的div下面有不透明1，它上面的div具有透明度0（因爲他們通過一系列的1走到0之前）

來源

2012-09-14 14:29:37 Asciiom

一個小問題是，由於某種原因，它在底部跳到藍色。 –

那個小提琴已被編輯_lot_！ –

@詹姆斯蒙塔涅這是計算divIndex值的問題。現在使用地板固定它。 – Asciiom

該解決方案可改進，使其更通用，但它是一個開始

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

    });

來源

2012-09-14 14:36:16 svillamayor

在滾動上更改div不透明

回答

相關問題