JS fadein機能で初めから画面内にある時はすぐ発火する記述をご教授ください。

Question

お世話になります。
JSで画面下から100pxに過ぎたらfadeinする記述をしております。
今回実装したいのは、もし、fadein要素が初めから画面内にある場合は（ファーストビュー）すぐに実行するという記述を知りたいです。よろしくお願いいたします。

 <script>
    // スクロール時のイベント
    $(window).scroll(function () {
      // fadeinクラスに対して順に処理を行う
      $('.fadein').each(function () {
        // スクロールした距離
        let scroll = $(window).scrollTop();
        // fadeinクラスの要素までの距離
        let target = $(this).offset().top;
        // 画面の高さ
        let windowHeight = $(window).height();
        // fadeinクラスの要素が画面下にきてから100px通過した
        // したタイミングで要素を表示
        if (scroll > target - windowHeight + 100) {
          $(this).css('opacity', '1');
          $(this).css('transform', 'translateY(0)');
        }
      });
    });
  </script>

Answer 1

イベントを複数取ったら良いかと

-$(window).scroll(function () {
+$(window).on('load scroll',function () { 

Comments

[yuko2430]

ご回答ありがとうございます。
しかし、私の知識が足りなく、よくわかりません。。すみません。
「もし、fadein要素が初めから画面内にある場合はすぐに実行する」の記述をご教示いただけますと幸いです。よろしくお願いいたします。

[m.ts10806]

ご自身の書かれた下記のコードを差し替えてください。
$(window).scroll(function () {

[sousuke]

横から失礼します。

「fadein要素が『初めから画面内にある場合は』すぐに『実行』する」というのは
「fadein要素が『画面のload時に画面内にある場合は』すぐに『現在のscrollイベントを実行』する」
ということですよね？ということは
$(window).scroll(function () { 略 });
$(window).load(function () { 略 });
でいいということになります。
m.ts10806氏の回答は略の部分が同じなので共通化した書き方みたいな感じです。

$(window).on('load scroll',function () { 略 })
こう書くとload時とscroll時に略の部分を実行します。

[yuko2430]

m.ts10806様、sousuke様ありがとうございました。
無事解決しました。
$(window).on('load scroll',function () を書き換えたらよかったのですね。｛｝の中身にどのように記述してよいかわかりませんでしたが、
｛｝の中は変えなくてよいということですね、もっと勉強します。
ありがとうございました。

[m.ts10806]

sousukeさん
フォローありがとうございます。

yuko2430さん
おそらく大抵の回答者は「一部だけ変更すれば良い」場合はその一部だけを回答とすることが多いと思います（あまりたくさんコードがあっても差分が分からないため）
diffにすれば良かったですね。

[m.ts10806]

diffにしました。