滚动时，我希望"position: fixed"内容在点击此内容时不会移动(类)

Question

当"位置：固定；点击"；class＝LimitPoint"；，我希望它停下来，不要动。

但是；位置：固定；内容经过"；LimitPoint"；至"；底部"；然后消失了。。

是否可以使"；位置：固定；"停止"；LimitPoint"；如所附图片？？

在此处输入图像描述

如果你在"；LimitPoint"；然后再次向上滚动，我希望它能随之移动。

为什么它不停在"；LimitPoint"？

救命。。！

+(使用"；位置：粘性"；，但是只有静态、相对、绝对、固定、继承5种类型可用于主页应用该代码。不可能使用"；粘性"；，所以我不可避免地试图用脚本来应用它。。TT

※我用了一个翻译，因为我不会说英语。这就是为什么我的话可能不自然。请理解。

$(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>

Answer 1

这可以用没有JS的纯CSS来完成，.fixedBox元素应该为此重新排序，如下所示：

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 class="fixedBox">
<ul class="fixedList">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
</ul>
</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>

Answer 2

我建议在滚动上应用position: sticky;。就在几天前，我遇到了这个问题：如何使固定滚动只坚持到某个部分

希望这有帮助：(