jQuery addClass example

Change class name on click in jQuery

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<div class="wrap">
  <div class="wrap-content">
    <div class="boxes"></div>
  </div>
</div>

CSS

body {
  background: #20262E;
  font-family: Helvetica Neue;
}

.wrap-box {
  width: 290px;
  height: 290px;
  background: #777;
  margin: 10px;
}

body, html {
  height: 100%;
  margin: 0;
}

.wrap {
  overflow: auto;
  border: 1px solid red;
  box-sizing: border-box;
  height: 100%;
}

.wrap-content {
  overflow: hidden;
}

JavaScript

for (var i = 0; i < 100; i++) {
  $(".boxes").append(`<div class="wrap-box">${1 + i}</div>`);
}

var _top = 0;
var top = 0;
var scrollTop = 0;
var lastTime = performance.now();
var isScrolling = false;

$(".wrap").scroll(function() {
	_top = this.scrollTop;
  if(!isScrolling) loop();
});

function loop() {
  isScrolling = true;
  var dt = -lastTime + (lastTime = performance.now());
  
  var a = 1 - Math.exp(-0.005 * dt);
  top = (1 - a) * top + a * _top;
  
  scrollTop = _top - top;
  scrollTop = Math.abs(scrollTop) < 0.001 ? 0 : scrollTop;
  $(".boxes").css("transform", "translateY(" + scrollTop + "px)");
  
  if(scrollTop !== 0)
  	requestAnimationFrame(loop);
   else
   	isScrolling = false;
}