淡化与滚动相关的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 );
});