<h1>Scroll to Element</h1>
<div id="el"></div>
body{
  min-height: 1900px;
  background-color: #e7eaee;
}

h1{
  text-align: center;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
  font-weight: 300;
  color: #787a7f;
  margin-top: 200px;
}

#el{
  border-radius: 5px;
  height: 100px;
  width: 300px;
  padding: 1rem;
  margin: 0 auto;
  background-color: #FFF;
  margin-top: 700px;
  box-shadow: 0px 40px 20px 0px rgba(0,0,0,0.2);
}
View Compiled
$(document).scroll(function(){
  winHeight     = $(window).innerHeight();
  topDif        = $("#el").offset().top;
  elHeight      = $("#el").innerHeight(),
  scrollTop     = $(window).scrollTop(),
  distance      = ((topDif - scrollTop) + elHeight),
  fromBottom    = (winHeight - distance),
  percentScroll = (fromBottom / winHeight),
  pixelNum      = ((percentScroll * 60) - 30) * (-1);

  $('#el').css('box-shadow', '0px ' + pixelNum + 'px 40px 0px rgba(0,0,0,0.2)');
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js