<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body{
height: 1500px;
}
.wrap {
left:0;
top:0;
margin:0;
padding:0;
width:100%;
height:100%;
position:fixed;
background-color:rgba(0,0,0,0);
color:#fff;
}
div.cnt {
position:absolute;
top: 0; left: 0; bottom: 0; right: 0;
margin:auto;
width:200px;
height:100px;
border: solid 1px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
$(window).scroll(function() {
var o = $(window).scrollTop()/($(document).height()- $(window).height());
$(".wrap").css({"background-color" : "rgba(0,0,0,"+o+")"})
})
});
</script>
</head>
<body>
<img src="http://javascript.ru/forum/images/smilies/smile.gif" width=30%>
<div class=wrap>
<div class=cnt></div>
</div>
</body>
</html>