關於滾動淡入淡出div

Question

我試圖淡化固定的背景div，因爲頁面內容覆蓋它。

理想的情況下我想用CSS如果可能的話做，否則的jQuery

現有例如： http://jsfiddle.net/HsRpT/

HTML

<div class="block"> 
    <h2>Fade this in/out as scroll down<h2> 
</div> 

<div class="content"> 
    <div class="headerbar"> 
    </div> 
     </div 

Answer 1

希望這是你在找什麼：

http://jsfiddle.net/HsRpT/6/

<div class="block"> 
    <h2>Fade this in/out as scroll down</h2> 
</div> 
<div class="content"> 
    <div class="headerbar"> 
    </div> 
</div> 

.block { 
    background: #339994; 
    width:100%; 
    padding-top:140px; 
    height: 200px; 
    position: fixed; 
} 
h2 { 
    color: #fff; 
    margin: 0px; 
    text-align: center; 
} 
.headerbar { 
    background: #f5dc61; 
    width:100%; 
    height: 680px; 
} 
.content { 
    position: relative; 
    top: 300px; 
} 
body { 
    margin: 0; 
    font-family: arial; 
} 

$(window).scroll(function() { 
    var el = $('.block');  
    var offset = el.offset(); 
    var opacity = ((offset.top - el.height())/100) * -1; 
    $('.block').css('opacity', opacity); 
});