Fade scroll

by Snj

HTML

<div id="blurred-image-container" class="headContainer">
  <div class="img-src"></div>
  <div class="img-src blurred-image"></div>
</div>
<div class="content" id="content">
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    <img src="http://media-2.web.britannica.com/eb-media/67/114967-004-E3A58022.jpg" />
    <br>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
    Content and stuff <br/>
</div><div id="botten"></div>

CSS

html,body{margin:0; padding:0}
#blurred-image-container {
    position:fixed; /* fixing the position takes it out of html flow */
    left:0;			/* top left corner should start at leftmost spot */
    top:0;			/* top left corner should start at topmost spot */
    width:100%;		/* take up the full browser width */
    height:50px; 	/* define height so you can define for content */
    z-index:200;	/* high z index so other content scrolls underneath */
}

.img-src { 
    position: absolute;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(251, 251, 251, 0) 100%);
    background-size: cover;
    top: -40px;
    bottom: 0%;
    width:120%;
    height:120%;
}

.img-src.blurred-image {
    opacity:100;

    -webkit-filter: blur(20px) brightness(0.7);
    -ms-filter: blur(20px) brightness(0.7);
    -o-filter: blur(20px) brightness(0.7);
    filter: blur(20px) brightness(0.7);
}
.content {
    text-align:center;
}

JavaScript

$(document).ready(function() {
  function currentYPosition() {
    // Firefox, Chrome, Opera, Safari
    if (self.pageYOffset) return self.pageYOffset;
    // Internet Explorer 6 - standards mode
    if (document.documentElement && document.documentElement.scrollTop)
      return document.documentElement.scrollTop;
    // Internet Explorer 6, 7 and 8
    if (document.body.scrollTop) return document.body.scrollTop;
    return 0;
  }

  function elmYPosition(eID) {
    var elm = document.getElementById(eID);
    var y = elm.offsetTop;
    var node = elm;
    while (node.offsetParent && node.offsetParent != document.body) {
      node = node.offsetParent;
      y += node.offsetTop;
    } return y;
  }

  function smoothScroll(eID) {
    var startY = currentYPosition();
    var stopY = elmYPosition(eID);
    var distance = stopY > startY ? stopY - startY : startY - stopY;
    if (distance < 100) {
      scrollTo(0, stopY); return;
    }
    var speed = Math.round(distance / 100);
    if (speed >= 20) speed = 20;
    var step = Math.round(distance / $(document).height());
    var leapY = stopY > startY ? startY + step : startY - step;
    var timer = 0;
    if (stopY > startY) {
      for ( var i=startY; i<stopY; i+=step ) {
        setTimeout("window.scrollTo(0, "+leapY+")", timer * speed);
        leapY += step; if (leapY > stopY) leapY = stopY; timer++;
      } return;
    }
    for ( var i=startY; i>stopY; i-=step ) {
      setTimeout("window.scrollTo(0, "+leapY+")", timer * speed);
      leapY -= step; if (leapY < stopY) leapY = stopY; timer++;
    }
  }


  $(window).scroll(function(e) {
    var s = $(window).scrollTop(),
        opacityVal = (s / 200);
    var elementHeight = $('.headContainer').height();
    var scrollPercent = 100 * $(window).scrollTop() / ($(document).height() - $(window).height());
    console.log(scrollPercent)

    $('.blurred-image').css('opacity', opacityVal);
    //$('.img-src').css('background', 'linear-gradient(to bottom, rgba(0, 0,...