How can I make the content with "position: fixed" stop at the designated "LimitPoint" and not continue scrolling past it?
The fixed content currently goes beyond the "LimitPoint" and disappears when scrolling to the bottom.
Is there a way to achieve the behavior shown in the attached image, where the fixed position stops at the LimitPoint?
If the scroll reaches the "LimitPoint" and then moves up again, I want the fixed content to follow along.
Why does the fixed content not stop at the designated "LimitPoint"?
A bit of assistance would be greatly appreciated!
+) While "position: sticky" is very convenient, this particular homepage only supports static, relative, absolute, fixed, and inherit positions. As such, I need to try implementing it with a script.
Note: I utilized a translator as English is not my native language, so please excuse any awkward phrasing in my message.
$(window).scroll(function() {
if (window.pageYOffset > ($('.LimitPoint').offset().top - $('.fixedList').outerHeight())) {
$('.fixedBox').removeClass('fixed');
$('.fixedBox').addClass('Limit');
} else {
$('.fixedBox').removeClass('Limit');
$('.fixedBox').addClass('fixed');
}
});ul,li {
margin: 0;
padding: 0;
list-style: none; }
#topArea {
min-height: 200vh;
background: #f4f4f4;
}
.fixedBox {
position: fixed;
width: 100%;
padding: 30px;
left: 0;
bottom: 0;
border: 0;
z-index: 88;
}
.fixedBox.fixed {
position: fixed;
width: 100%;
left: 0;
bottom: 0;
z-index: 88;
}
.fixedBox.Limit {
position: absolute;
left: 0;
bottom: 0;
z-index: 88;
}
.fixedBox .fixedList {
color: coral;
font-size: 30px;
font-weight: 600;
}
.LimitPoint {
width: 100%;
height: 1px;
background: red;
}
#bottomArea {
position: relative;
margin: 120px 0 0;
padding: 0 5%;
}
#bottomArea ul div {
position: relative;
display: flex;
flex-direction: row;
}
#bottomArea ul li {
padding: 7px;
}
#bottomArea ul li img {
width: 100%;
height: auto;
}<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div class="fixedBox">
<ul class="fixedList">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
<div id="topArea"> </div>
<div class="LimitPoint"></div>
<div id="bottomArea">
<ul>
<div>
<li><img src="https://url.kr/inj9yz"></li>
<li><img src="https://url.kr/inj9yz"></li>
<li><img src="https://url.kr/inj9yz"></li>
</div>
<div>
<li><img src="https://url.kr/inj9yz"></li>
<li><img src="https://url.kr/inj9yz"></li>
<li><img src="https://url.kr/inj9yz"></li>
</div>
</ul>
</div>