When "position: fixed" hits "class=LimitPoint", I want it to stop and not move.
But the "position: fixed" content goes past "LimitPoint" to "bottom" and then disappears..
Is it possible to make "position: fixed" stop on "LimitPoint" like in the attached image??
If you stop at the "LimitPoint" and then scroll up again, I want it to move with it.
Why doesn't it stop at "LimitPoint"?
Help..!
※I used a translator because I couldn't speak English. That is why my words may not be natural. Please understand.
$(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 >
<ul >
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
<div id="topArea"> </div>
<div ></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>
CodePudding user response:
This can be done with pure CSS with no JS, .fixedBox
element should be reordered for this, like so:
ul,li {
margin: 0;
padding: 0;
list-style: none; }
#topArea {
min-height: 200vh;
background: #f4f4f4;
}
.fixedBox {
position: sticky;
width: 100%;
padding: 30px;
left: 0;
bottom: 0;
border: 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 id="topArea"> </div>
<div >
<ul >
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</div>
<div ></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>
CodePudding user response:
I would suggest applying position: sticky;
on scroll. I ran into this problem just a few days ago:
How to make fixed scroll stick only till a certain section
Hope this helps :)