Fade 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); 
});