JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <h1 class="parallax">Teste</h1>
</div>

<br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

CSS

div{
  background:url('https://cdn.pixabay.com/photo/2018/02/27/21/55/belly-3186730_960_720.jpg');
  height:300px
}

JavaScript

var lastScrollTop = 0;
var max = 300; // bottom position dinamicamente
$(window).scroll(function(event){
  var st = $(this).scrollTop();
  if (st > lastScrollTop){
  	if(st > max){
    	var px = max;
    } else {
    	var px = st;
    }
    $('.parallax').css('transform', 'translateY(' + px + 'px)');
  } else {
  	if(st > max){
    	var px = max;
    } else {
    	var px = st;
    }
    $('.parallax').css('transform', 'translateY(' + px + 'px)');
  }
  lastScrollTop = st;
});