When scrolling, I want the "position: fixed" content to not move if it hits this (class)

Question

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??

enter image description here

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..!

+) It is very convenient to use "position: sticky", but only 5 types of static, relative, absolute, fixed, inherit are available for the homepage to which this code is applied. It is impossible to use "sticky", so I am inevitably trying to apply it with a script..TT

※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 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

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