如果使用"fixed"的内容触及特定位置(类)，我希望该位置是固定的

Question

我想[。[…]停在…之上fixedLimit]当[。右tinner]命中[。]fixedLimit] after "fixed"应用于[。右tinner]区域

但是在我写的代码中，textarea侵犯了[#bottomArea]。

如何使文本区停止当它击中[。fixedLimit]像附加的图像??

我不会说英语，所以我请了一位翻译。

所以句子可能不流畅。对不起. . !

输入图片描述

$(window).scroll(function() {
if ($(window).scrollTop() >= 1) {
$('.rightInner').addClass('fixed');
} else {
$('.rightInner').removeClass('fixed');
}
});
$(window).scroll(function() {
if (window.pageYOffset >= $('.fixedLimit').offset().top) {
$('.rightInner').removeClass('fixed');
$('.rightInner').addClass('Limit');
} else {
$('.rightInner').removeClass('Limit');
}
});

#topWrap {
display: flex;
min-height: 100vh;
flex-wrap: wrap;
align-items: stretch;
}
#topWrap #leftArea {
position: relative;
width: 50%;
}
#topWrap #leftArea img {
width: 100%;
height: auto ;
box-sizing: border-box;
}
#topWrap #rightArea {
position: relative;
width: 50%;
}
#topWrap #rightArea .rightInner {
position: absolute;
width: 100%;
top: 0;
z-index: 88;
} 
#topWrap #rightArea .rightInner.fixed {
position: fixed;
width: 50%;
height: 100%;
top: 0;
bottom: 0;
z-index: 88;
}
#topWrap #rightArea .rightInner.Limit {
position: absolute;
top: auto;
bottom: 0;
transition: ease .45s;
z-index: 88;
}
#topWrap #rightArea .rightInner .rightText {
padding: 20% 10%;
color: coral;
font-size: 30px;
font-weight: 600;            
}
.fixedLimit { width: 100%; height: 1px; }
#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://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="topWrap">
<div id="leftArea">
<ul>
<li><img src="https://images.unsplash.com/photo-1631609389098-c89b2ea9852d?ixid=MnwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8M3x8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"></li>
<li><img src="https://images.unsplash.com/photo-1627912878381-7604c488054b?ixid=MnwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8MjB8fHxlbnwwfHx8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"></li>
<li><img src="https://images.unsplash.com/photo-1627666586575-b383710392a4?ixid=MnwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8Mjd8fHxlbnwwfHx8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"></li>
</ul>
</div>
<div id="rightArea">
<div class="rightInner">
<div class="rightText">
content<br>
content<br>
content<br>
content<br>
</div>
</div>
</div>
</div>

<div class="fixedLimit"></div>

<div id="bottomArea">
<ul>
<div>
<li><img src="https://images.unsplash.com/photo-1631541911232-72bc7448820a?ixid=MnwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8OHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"></li>
<li><img src="https://images.unsplash.com/photo-1631541911091-1d2b5169d7b9?ixid=MnwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8MTB8fHxlbnwwfHx8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"></li>
<li><img src="https://images.unsplash.com/photo-1628152371231-936cf45eb8f3?ixid=MnwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8MjN8fHxlbnwwfHx8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"></li>
</div>
<div>
<li><img src="https://images.unsplash.com/photo-1631541911232-72bc7448820a?ixid=MnwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8OHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"></li>
<li><img src="https://images.unsplash.com/photo-1631541911091-1d2b5169d7b9?ixid=MnwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8MTB8fHxlbnwwfHx8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"></li>
<li><img src="https://images.unsplash.com/photo-1628152371231-936cf45eb8f3?ixid=MnwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8MjN8fHxlbnwwfHx8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"></li>
</div>
</ul>
</div>

Answer 1

删除额外的滚动代码，并添加边栏高度fixedLimit偏移量。我注释了transition，因为它会导致侧边栏跳转。

$(window).scroll(function() {
if (window.pageYOffset > ($('.fixedLimit').offset().top - $('.rightText').outerHeight()  ) ) {
$('.rightInner').removeClass('fixed');
$('.rightInner').addClass('Limit');
} else {
$('.rightInner').removeClass('Limit');
$('.rightInner').addClass('fixed');
}
});

#topWrap {
display: flex;
min-height: 100vh;
flex-wrap: wrap;
align-items: stretch;
}
#topWrap #leftArea {
position: relative;
width: 50%;
}
#topWrap #leftArea img {
width: 100%;
height: auto ;
box-sizing: border-box;
}
#topWrap #rightArea {
position: relative;
width: 50%;
}
#topWrap #rightArea .rightInner {
position: absolute;
width: 100%;
top: 0;
z-index: 88;
} 
#topWrap #rightArea .rightInner.fixed {
position: fixed;
width: 50%;
height: 100%;
top: 0;
bottom: 0;
z-index: 88;
}
#topWrap #rightArea .rightInner.Limit {
position: absolute;
top: auto;
bottom: 0;
/*transition: ease .45s;*/
z-index: 88;
}
#topWrap #rightArea .rightInner .rightText {
padding: 20% 10%;
color: coral;
font-size: 30px;
font-weight: 600;            
}
.fixedLimit { 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://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="topWrap">
<div id="leftArea">
<ul>
<li><img src="https://images.unsplash.com/photo-1631609389098-c89b2ea9852d?ixid=MnwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8M3x8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"></li>
<li><img src="https://images.unsplash.com/photo-1627912878381-7604c488054b?ixid=MnwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8MjB8fHxlbnwwfHx8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"></li>
<li><img src="https://images.unsplash.com/photo-1627666586575-b383710392a4?ixid=MnwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8Mjd8fHxlbnwwfHx8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"></li>
</ul>
</div>
<div id="rightArea">
<div class="rightInner">
<div class="rightText">
content<br>
content<br>
content<br>
content<br>
</div>
</div>
</div>
</div>

<div class="fixedLimit"></div>

<div id="bottomArea">
<ul>
<div>
<li><img src="https://images.unsplash.com/photo-1631541911232-72bc7448820a?ixid=MnwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8OHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"></li>
<li><img src="https://images.unsplash.com/photo-1631541911091-1d2b5169d7b9?ixid=MnwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8MTB8fHxlbnwwfHx8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"></li>
<li><img src="https://images.unsplash.com/photo-1628152371231-936cf45eb8f3?ixid=MnwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8MjN8fHxlbnwwfHx8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"></li>
</div>
<div>
<li><img src="https://images.unsplash.com/photo-1631541911232-72bc7448820a?ixid=MnwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8OHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"></li>
<li><img src="https://images.unsplash.com/photo-1631541911091-1d2b5169d7b9?ixid=MnwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8MTB8fHxlbnwwfHx8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"></li>
<li><img src="https://images.unsplash.com/photo-1628152371231-936cf45eb8f3?ixid=MnwxMjA3fDB8MHxwcm9maWxlLXBhZ2V8MjN8fHxlbnwwfHx8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"></li>
</div>
</ul>
</div>