<div class="wrapper">
  <div class="el"></div>
</div>

.wrapper {
  height: 800vh;
  padding: 40px 0;
}
.el {
  width: 200px;
  height: 200px;
  background: #000;
  margin: 0 auto;
  transform: translateY(0);
  will-change: transform;
  transition: transform .2s;
}

const el = document.querySelector('.el')
window.addEventListener('scroll', e => {
  let offsetY = window.pageYOffset + window.pageYOffset * 0.1
  if (offsetY >= 20) {
    offsetY = 20
  }
  el.style.transform = `translateY(${offsetY}px)`
})