[JavaScript] [スクロールイベント] 親要素の範囲内で子要素のクラス属性の着脱（切り替え）

Question

タイトルの通り、生のJavaScriptで
①スクロールイベント発火時、
②親要素がビューポート上部を通過している間、
③親要素の範囲内に限定して
子要素に"position: fixed;"のプロパティをもつクラス属性を付与したいと考えております。

下記ソースコードになります。

    <main>
        <div class="one-page"></div>
        <div class="box">
            <h1 class="ori">固定できるかな</h1>
        </div>
        <div class="one-page"></div>
        <div class="one-page"></div>
    </main>

main {
    .one-page {
        width: 100%;
        height: 100vh;
        background-color: #f1f1f1;
    }
    .box {
        width: 20vw;
        height: 200px;
        background-color: darkseagreen;
        .is-fixed {
            position: fixed;
            top: 0; left: 0;
        }
    }
}

//親要素のスクロール量を加味した位置（top, bottom）の取得
let elem = document.querySelector('.box');
let rect = elem.getBoundingClientRect();
let y = rect.top + window.scrollY;
let yBottom = rect.bottom + window.scrollY;


window.addEventListener('DOMContentLoaded', function() {

//スクロールイベント時に発火！
    window.addEventListener('scroll', function() {

        if ( window.scrollY > y ) {
            document.querySelector('.ori').classList.add('is-fixed');
        } else if ( window.scrollY < yBottom ) {
            document.querySelector('.ori').classList.remove('is-fixed');
        } else {
            ;
        }
    });
});

上記のソースコードでは
親要素のトップ位置での切り替えはできているのですが、
ボトム位置での切り替え（クラス属性が外れて子要素の固定解除）ができません。

他にもif条件を

if( y < window.scrollY < yBottom ) {
… } else {
… }

でも試したのですがこれだと常にクラス属性が付与されてしまいます。

お手数おかけしますが、もしお時間があればご教示の程よろしくお願いします。
尚、teratailを使用するのが今回初なので、
わかりにくい部分もあると思いますが何卒ご了承ください。