Despite extensive research, I am still unable to understand why this particular issue is not resolving for me.
The problem lies within two specific div elements that are causing trouble. One of the divs is utilizing position: fixed in order to remain visible on the screen at all times.
The intention is for this div to stop being fixed once it reaches the footer and instead stick to the top of the footer. Although I attempted to implement solutions from this reference, the div consistently jumps back up to the top of the page upon reaching the footer.
For demonstration purposes, here is a fiddle:
$(document).scroll(function (){
if($('.userInfo').offset().top + $('.userInfo').height() >= $('footer').offset().top - 10){
$('.userInfo').css('position', 'absolute');
}
if($(document).scrollTop() + window.innerHeight < $('footer').offset().top){
$('.userInfo').css('position', 'fixed');
}
});.profileMain{
display: flex;
}
.userInfoContainer{
height: 100%;
width: 50%;
display: inline-block;
}
.userInfo{
background: red;
width: 50%;
position: fixed;
}
.userContent{
background: blue;
width: 50%;
margin-bottom: 10em;
}
footer{
background: gray;
width: 100%;
height: 30em;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "profileMain">
<div class = "userInfoContainer">
<div class = "userInfo">f</div>
</div>
<div class = "userContent">f</div>
</div>
<footer></footer>I am seeking assistance in understanding where I may be going wrong in my approach. Any guidance would be greatly appreciated.