<div id="space" class="scroll-space"></div>
<h1>Scrolling - with lerp</h1>
<div class="scroll-indicator">
  <div class="bar"></div>
  <span id="indicator" class="indicator"></span>
</div>

body {
  background: #f8f9fb;  
  font-weight: 500;
  font-family: "Hind", Arial, sans-serif;
}

.scroll-space {
  position: relative;
  width: '100%';
  height: 2000px;
  top: 0px;
  left: 0px;
}

.scroll-indicator {
  width: 300px;
  margin-left: -150px;
  left: 50%;
  height: 40px;
  margin-top: -20px;
  top: 50%;
  position: fixed;
}

.bar {
  width: 100%;
  height: 4px;
  background: #6c7aaa;
  position: absolute;
  top: 50%;
  margin-top: -2px;
}

.indicator {
  position: absolute;
  height: 40px;
  width: 3px;
  background: #1b202f;
}

h1 {
  position: fixed;
  top: 0px;
  width: 100%;
  height: 40px;
  font-size: 22px;
  text-align: center;
}

var scrollArea = document.getElementById('space');
var scrollIndicator = document.getElementById('indicator');
var scrollHeight = 0;
var scrollOffset = 0;
var scrollPercent = 0;
var indicatorPosition = scrollPercent;

resize();

function loop() {
  scrollOffset = window.pageYOffset || window.scrollTop;
  scrollPercent = scrollOffset/scrollHeight || 0;
  indicatorPosition += (scrollPercent-indicatorPosition)*0.05;
  var transformString = 'translateX('+(indicatorPosition*300)+'px)';
  indicator.style.mozTransform = transformString;
  indicator.style.webkitTransform = transformString;
  indicator.style.transform = transformString;
  
  requestAnimationFrame(loop);
}

loop();

function resize() {
  scrollHeight = window.innerHeight*4;
  scrollArea.style.height = (window.innerHeight*5)+'px';
}

window.addEventListener('resize', resize);