Jqueryでスクロールエフェクトが想定した動作をしない

Question

下記のJqueryでスクロールエフェクトを複数要素に追加しようとしています。
スクロールして一つ目の要素は問題なく動作するのですが2つ目以降はエフェクト開始位置がズレているのか
だいぶ下の方までスクロールしないと動作しなくなってしまいます。（3つ目はもっと下まで要スクロール）
ズレていることはわかるのですが何が原因でこうなっているのでしょうか？

<div class="box scroll-fade">
    <div class="pic">
        <div class="ex">
　          <a href="img/season/a.jpg"><img src="img/link/a.jpg" alt="" width="90%"></a>
            <p class="pagetitle">a</p>
            <p class="content"></p>
        </div>
    </div>
    <div class="pic">
        <div class="ex">
            <a href="img/season/b.jpg"><img src="img/link/b.jpg" alt="" width="90%"></a>
            <p class="pagetitle">b</p>
            <p class="content"></p>
        </div>
    </div>
</div>
<p></p>
<div class="box scroll-fade">
    <div class="pic">
        <div class="ex">
            <a href="img/season/c.jpg"><img src="img/link/c.jpg" alt="" width="90%"></a>
            <p class="pagetitle">c</p>
            <p class="content"></p>
        </div>
    </div>
    <div class="pic">
        <div class="ex">
            <a href="img/season/d.jpg"><img src="img/link/d.jpg" alt="" width="90%"></a>
            <p class="pagetitle">d</p>
            <p class="content"></p>
        </div>
    </div>
</div>

.pic {
    display: table-cell;
    text-align: center;
}

.pic img {
    width: 80%;
}

.ex {
    width: 80%;
    margin: -8px auto 100px;
    height: 250px;
    background: white;
}

.box {
    display: table;
}

$(function(){
    var effect_pos = 300; // 画面下からどの位置でフェードさせるか(px)
    var effect_move = 50; // どのぐらい要素を動かすか(px)
    var effect_time = 800; // エフェクトの時間(ms) 1秒なら1000

    // フェードする前のcssを定義
    $('.scroll-fade').css({
        opacity: 0,
        transform: 'translateY('+ effect_move +'px)',
        transition: effect_time + 'ms'
    });

    // スクロールまたはロードするたびに実行
    $(window).on('scroll load', function(){
        var scroll_top = $(this).scrollTop();
        var scroll_btm = scroll_top + $(this).height();
        effect_pos = scroll_btm - effect_pos;

        // effect_posがthis_posを超えたとき、エフェクトが発動
        $('.scroll-fade').each( function() {
            var this_pos = $(this).offset().top;
            if ( effect_pos > this_pos ) {
                $(this).css({
                    opacity: 1,
                    transform: 'translateY(0)'
                });
            }
        });
    });
});

Comments

[m.ts10806]

コードのマークダウンできていませんので質問を編集し
### 該当のソースコード
のところをコードと置き換えてください。
またJavaScriptのコードだけではこちらで再現確認とれませんので
HTML、CSSもご提示ください

[machaking]

すいませんでした。
修正しました。

Answer 1

最初は effect_posの値が300pxになっていますが、スクロールするごとにeffect_posの値が変わってしまうため、スクロールの位置がずれてしまっているのが、原因だと思います。

ですので、

var effect_pos_const = 300; // 画面下からどの位置でフェードさせるか(px)固定
var effect_pos = effect_pos_const // effect_posの値代入用

のような感じで対応させれば指定の位置でスクロールエフェクトが実行できると思います。

念のため、自分の検証用のcodepenも共有いたします。
jQuery スクロールエフェクト検証用

Comments

[machaking]

ありがとうございました。おっしゃるとおりでした。
要素が一つの場合しか想定されていなかったということですね。