Scroll down and fade element

by daraand

HTML

<div style="background-image:url('http://dev.theoryanimation.com/images/easyblog/images/137/2e1ax_simplistic_entry_learn.jpg');" class="header ezblog-imageentry">
			</div>

<img src="http://dev.theoryanimation.com/images/easyblog/images/137/2e1ax_simplistic_entry_learn.jpg">
			</img>
<img src="http://dev.theoryanimation.com/images/easyblog/images/137/2e1ax_simplistic_entry_learn.jpg">
			</img>
<img src="http://dev.theoryanimation.com/images/easyblog/images/137/2e1ax_simplistic_entry_learn.jpg">
			</img>
<img src="http://dev.theoryanimation.com/images/easyblog/images/137/2e1ax_simplistic_entry_learn.jpg">
			</img><img src="http://dev.theoryanimation.com/images/easyblog/images/137/2e1ax_simplistic_entry_learn.jpg">
			</img><img src="http://dev.theoryanimation.com/images/easyblog/images/137/2e1ax_simplistic_entry_learn.jpg">
			</img>
<img src="http://dev.theoryanimation.com/images/easyblog/images/137/2e1ax_simplistic_entry_learn.jpg">
			</img>
<img src="http://dev.theoryanimation.com/images/easyblog/images/137/2e1ax_simplistic_entry_learn.jpg">
			</img>

CSS

.ezblog-imageentry {
background-size: cover;
background-position: 0 0;
position: absolute;
top: -3.7em;
left: -25%;
height: 500px;
width: 150%;
overflow: hidden;
z-index: 11;
}

JavaScript

//reduce the opacity of the banner if the page is scrolled.
$(window).scroll(function () {
  var height = $("body").height();
  var scrollTop = $("body").scrollTop();
  var opacity = 1;

  if(scrollTop < 100)
    {opacity = 1-Math.floor(scrollTop)/100;}
    else
    {opacity = 0.0;}

  $(".header").css("opacity", opacity);
  $(".header").hover(function(){
    $(this).css("opacity", 1);
    },function(){
    $(this).css("opacity", 0.0);
    });
});