html
<div class="header">
<div class="bg"></div>
</div>
css
.header{ height:1rem; border-bottom:.01rem solid #313131; position: fixed; top:0; left:0; width:100%; z-index:50; }
.header .bg{ width:100%; height:100%; background:#000; top:0; left:0; position:absolute; opacity:0; }
js
var headerH = $('.header').height(); //头部高度
$(document).scroll(function(event) {
var scrT = $(window).scrollTop();
$('.header .bg').css({
'-o-opacity':scrT/headerH,
'-ms-opacity':scrT/headerH,
'-moz-opacity':scrT/headerH,
'-webkit-opacity':scrT/headerH,
'opacity':scrT/headerH
})
});