How to take the bottom position a dynamic div

Question

I’m trying to get the bottom position of a div dynamically via jQuery and I’m not getting it.

What I need is to take this position to make a limit of how far the title of the page can go dynamically, so I can use the same code in several places.

I made a Jsfiddle and the snippet below to better illustrate.

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;
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>