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