如果使用“固定”的内容触及特定位置（类），我希望该位置是固定的

Question

在滚动时将“fixed”应用于 [.rightInner] 区域后，当 [.rightInner] 命中 [.fixedLimit] 时，我希望 [.rightInner] 停止在 [.fixedLimit] 之上。

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

我怎样才能让 textarea 在碰到 [.fixedLimit] 时停止，就像附加的图片一样？？

※我不会说英语，所以我使用了翻译。

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

enter image description here

$(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 偏移量。我评论了过渡，因为它导致侧边栏跳跃。

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