<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.js"></script>
<style>
.banner{
position:fixed;
top:0;left:0;
width:100%;
height:100px;
background:blue;
}
</style>
</head>
<body>
<div class="banner"></div>
<div style="height:5000px;background:green;"></div>
<script>
$(".banner").css("opacity",'0')
$(window).scroll(function(){
var scrollTop=$(window).scrollTop();
var screenHeight=$(window).height();
$(".banner").css("opacity",scrollTop/screenHeight);
})
</script>
</body>
</html>