スクロールでdivごとにフェードイン＋ディレイさせたいが、全てのdivに反映されてしまう

 前提・実現したいこと

スクロールでフェードイン＋同じdiv(.js-scroll-box)内にあるものはディレイ

というものを、jqueryで実装したかったのですが、
可視領域に入っていないものを含めた全てにクラス付与されてしまい困っています。
「見えているjs-scroll-boxの中の、js-scroll-fadeにクラス付与」という形にすればいいと思うのですが、
どうすればいいでしょうか。

<div class="space"></div>
<div class="box js-scroll-box">
    <p class="js-scroll-fade">ダミーテキストダミーテキスト</p>
    <p class="js-scroll-fade fade-left">ダミーテキストダミーテキスト</p>
    <p class="js-scroll-fade fade-right">ダミーテキストダミーテキスト</p>
</div>
<div class="box js-scroll-box">
    <p class="js-scroll-fade">ダミーテキストダミーテキスト</p>
    <p class="js-scroll-fade fade-left">ダミーテキストダミーテキスト</p>
    <p class="js-scroll-fade fade-right">ダミーテキストダミーテキスト</p>
</div>

.space{
    height: 100vh;
}
.box{
    background: #ccc;
    margin-bottom: 600px;
}
.js-scroll-fade {
    position: relative;
    opacity: 0;
    transform: translate(0, 50px);
    transition: all 1.2s ease-out;
}

.js-scroll-fade.fade-right {
    transform: translate(50px, 0px);
}
.js-scroll-fade.fade-left {
    transform: translate(-50px, 0px);
}
.js-scroll-fade.is-animation{
    opacity: 1;
    transform: translate(0, 0);
}

(function(){
    $(window).scroll(function (){
        $('.js-scroll-box').each(function(){
            var elemPos = $(this).offset().top;
            var scroll = $(window).scrollTop();
            var windowHeight = $(window).height();
            if (scroll > elemPos - windowHeight + 100){
                $('.js-scroll-fade').each(function(i){
                    $(this).delay(600*i).queue(function() {
                        $(this).addClass('is-animation').dequeue();
                    });
                });
            }
        });
    });
});

 失敗

.js-scroll-boxにクラスをつけて、そのクラスの中のjs-scroll-fadeにクラスを付与しては？と思い試しました。
可視領域に入ってからフェードされるようになったものの、2つ目のboxの開始が遅くなってしまいました(ディレイの関係でしょうか？)

$(function(){
    $(window).scroll(function (){
        $('.js-scroll-box').each(function(){
            var elemPos = $(this).offset().top;
            var scroll = $(window).scrollTop();
            var windowHeight = $(window).height();
            if (scroll > elemPos - windowHeight){
                $(this).addClass('js-scroll-box-on');
            }
            if (scroll > elemPos - windowHeight + 100){
                $('.js-scroll-box-on .js-scroll-fade').each(function(i){
                    $(this).delay(600*i).queue(function() {
                        $(this).addClass('is-animation').dequeue();
                    });
                });
            }
        });
    });
});

最近使い始めたばかりなのでお見苦しいコードかと思います。すみません。
分かる方がいらっしゃいましたら、よろしくお願いいたします。