I am trying to check whether a user scrolled down to 100px from the bottom of a div info-right and if so, it should alert and add a class bottom. I have the code below but it doesn't seem to work:
var stickyTop = $('.info-left').offset().top;
$(window).scroll(function() {
if ($(window).scrollTop() >= stickyTop) {
$('.info-left').addClass('sticky');
} else {
$('.info-left').removeClass('sticky');
}
});
$(window).scroll(function() {
if ($('info-right').scrollTop() + $(window).height() > $(document).height() - 100) {
alert("near bottom!");
$('.info-left').addClass('bottom');
} else {
$('.info-left').removeClass('bottom');
}
});.info-content {
display: flex;
width: 100%;
position: relative;
}
.info-left {
width: 300px;
background: red;
flex-shrink: 0;
padding: 10px;
}
.info-right {
background: green;
flex-grow: 1;
padding: 10px;
}
.bottom {
background: yellow;
height: 500px;
}
.info-left.sticky .left-inner {
position: fixed;
top: 0;
width: 300px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<div class="info-content single container">
<div class="info-left">
<div class="left-inner">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla facilisi nullam vehicula ipsum a. Dignissim enim sit amet venenatis. Viverra maecenas accumsan lacus vel facilisis volutpat
est velit egestas.
</div>
</div>
<div class="info-right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nulla facilisi nullam vehicula ipsum a. Dignissim enim sit amet venenatis. Viverra maecenas accumsan lacus vel facilisis volutpat
est velit egestas. Elementum eu facilisis sed odio. Interdum posuere lorem ipsum dolor sit amet. Justo eget magna fermentum iaculis eu non diam phasellus vestibulum. Venenatis cras sed felis eget velit aliquet sagittis id consectetur. At urna condimentum
mattis pellentesque id nibh tortor id. Ullamcorper sit amet risus nullam. Orci dapibus ultrices in iaculis nunc sed augue lacus. In tellus integer feugiat scelerisque varius morbi enim. Ac turpis egestas sed tempus. Tempus egestas sed sed risus pretium
quam vulputate dignissim suspendisse. Tortor aliquam nulla facilisi cras fermentum. At imperdiet dui accumsan sit. Commodo ullamcorper a lacus vestibulum sed arcu. Sed vulputate odio ut enim blandit volutpat maecenas volutpat. Urna nunc id cursus
metus aliquam eleifend mi in. Mi in nulla posuere sollicitudin aliquam. Pharetra pharetra massa massa ultricies mi quis. Accumsan tortor posuere ac ut. In fermentum posuere urna nec. Fames ac turpis egestas sed tempus urna et. Mollis aliquam ut porttitor
leo a. Nisi quis eleifend quam adipiscing vitae. Nisl tincidunt eget nullam non. Enim nulla aliquet porttitor lacus luctus accumsan tortor posuere ac. Potenti nullam ac tortor vitae purus faucibus ornare suspendisse sed. Ut etiam sit amet nisl purus
in mollis nunc. Eget lorem dolor sed viverra ipsum nunc. Pellentesque nec nam aliquam sem et. Eget felis eget nunc lobortis. Enim nec dui nunc mattis enim ut tellus elementum. Mauris commodo quis imperdiet massa tincidunt nunc pulvinar. Ac tortor
vitae purus faucibus ornare suspendisse. Feugiat sed lectus vestibulum mattis ullamcorper velit sed. Dignissim suspendisse in est ante in nibh. Id cursus metus aliquam eleifend. Imperdiet dui accumsan sit amet. Sagittis purus sit amet volutpat consequat
mauris nunc congue nisi. Euismod quis viverra nibh cras pulvinar mattis nunc sed. Lacus sed turpis tincidunt id aliquet risus feugiat. In metus vulputate eu scelerisque felis. Consectetur purus ut faucibus pulvinar elementum integer enim. Tellus orci
ac auctor augue mauris augue. Senectus et netus et malesuada fames ac turpis egestas integer. Vel fringilla est ullamcorper eget. Proin libero nunc consequat interdum varius sit amet. Nibh venenatis cras sed felis eget. Purus ut faucibus pulvinar
elementum integer enim neque. Risus quis varius quam quisque. Tincidunt augue interdum velit euismod in pellentesque massa placerat duis. Et netus et malesuada fames ac turpis egestas. Arcu ac tortor dignissim convallis aenean. Nibh praesent tristique
magna sit. Turpis egestas maecenas pharetra convallis posuere. Tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla facilisi. Erat velit scelerisque in dictum non consectetur a. Sagittis vitae et leo duis ut diam quam. At auctor urna
nunc id cursus metus aliquam eleifend. Quis vel eros donec ac odio tempor orci dapibus ultrices. Faucibus a pellentesque sit amet porttitor eget. Auctor elit sed vulputate mi sit. Eget gravida cum sociis natoque. Morbi tempus iaculis urna id. Placerat
orci nulla pellentesque dignissim enim. Quisque egestas diam in arcu cursus euismod quis. Leo vel orci porta non. Quam lacus suspendisse faucibus interdum posuere lorem ipsum dolor sit. Est ullamcorper eget nulla facilisi etiam. Interdum posuere lorem
ipsum dolor sit amet consectetur adipiscing elit. Sed tempus urna et pharetra pharetra massa massa ultricies. At ultrices mi tempus imperdiet. Parturient montes nascetur ridiculus mus mauris. Et odio pellentesque diam volutpat commodo sed egestas.
Faucibus a pellentesque sit amet porttitor eget dolor morbi. Mauris vitae ultricies leo integer malesuada nunc vel. Auctor augue mauris augue neque. Mauris pharetra et ultrices neque ornare aenean euismod elementum. Cursus risus at ultrices mi tempus
imperdiet nulla malesuada. Malesuada nunc vel risus commodo. Enim ut sem viverra aliquet eget sit amet.
</div>
</div>
<div class="bottom">
Some more content at the bottom
</div>
