javascript - Blur background based on page length -

i trying make if scroll down, blurred picture appears (with opacity) , if you're @ bottom of page, blurred picture visible , old 1 disappeared. i'm using same pagecontainer every page , want make script on every page, different page lengths.

i have far:

css:

.img-src {     position: fixed;     background-position: center;     -webkit-background-size: cover;     top: 0;     bottom: 0;     left: 0;     right: 0;     z-index: -1; }  .blurred-img {     opacity: 0; } 

js:

var divs = $('.social, .title'), limit = 0;  $(window).on('scroll', function() {    var st = $(this).scrolltop();    if (st <= limit) {        $('.blurred-img').css({ 'opacity' : (1 - st/limit) });    } }); 

filter: blur works fine , looks better. how this?

var img = document.getelementbyid("background-img");  var container = document.body;  var maxblur = 20;    window.addeventlistener("scroll", function(){    var position = container.scrolltop / (container.scrollheight - window.innerheight);    // adjust position safari may scroll higher or lower     // actual size during "bounce effect".    position = math.max(0, math.min(1, position));    var bluramount = position * maxblur;    img.style["filter"] = "blur(" + bluramount + "px)";  });

#background-img {    position: fixed;  }  #spacer {    width: 50px;    height: 2000px;  }

<img id="background-img"  src="http://placehold.it/400x200?text=background" />  <div id="spacer"></div>

if want 2 images strategy, here how it.

var img = document.getelementbyid("blured-background-img");  var container = document.body;    window.addeventlistener("scroll", function(){    var opacity = container.scrolltop / (container.scrollheight - window.innerheight);    // adjust opacity safari may scroll higher or lower     // actual size during "bounce effect".    opacity = math.max(0, math.min(1, opacity));    img.style["opacity"] = opacity;  });

#background-img {    position: fixed;  }  #blured-background-img {    position: fixed;    opacity: 0;  }  #spacer {    width: 50px;    height: 2000px;  }

<img id="background-img"  src="http://placehold.it/400x200/7a6dff/d3cfff?text=bottom" />  <img id="blured-background-img"  src="http://placehold.it/400x200?text=top" />  <div id="spacer"></div>