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 did a JSFiddle and the snippet below for a better example.
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><h1class="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>