JavaScriptでリロード時にoffset().topを取得したい

Question

閲覧いただきまして、ありがとうございます。

現在、スクロールしてそのオブジェクトの位置までくると、オブジェクトをふわっとフェードインで表示される仕様をJavaScriptで実装しています。

<div class="fadein"></div>

.fadein {
  display: none;
}
.scrollin {
  display: block;
}

  $(window).scroll(function() {
    $(".fadein").each(function() {
      var elemPos = $(this).offset().top;
      var scroll = $(window).scrollTop();
      var windowHeight = $(window).height();
      if (scroll > elemPos - windowHeight + 200) {
        $(this).addClass("scrollin");
      }
    });
  });

こちらのコードで問題なく動いているのですが、一点問題があります。
オブジェクトの対象位置でリロードした時にスクロールの高さを取得できず、表示されません。
リロードした際でも高さを取得してフェードイン表示するためにはどうすればよろしいでしょうか？

初歩的な質問で恐縮ですが、ご回答どうぞよろしくお願いいたします！

Comments

[m.ts10806]

html,cssもご提示ください。（特にCSS：.scrollinは必要です）

[k10a]

失礼いたしました。

[m.ts10806]

質問は編集できますので適宜ご対応いただければと。

[x_x]

なぜか解決後に質問が編集されましたが、これでは「フェードイン」が実現できていないように見えます。終了でいいのでしょうか？

[k10a]

終了で問題ありません。

Answer 1

以下のようにonに書き換えてscrollだけでなく
load時にも実行されるようにすれば取得できます。

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

$(window).on('load scroll', function() {
  $(".fadein").each(function() {
    var elemPos = $(this).offset().top;
    var scroll = $(window).scrollTop();
    var windowHeight = $(window).height();
    if (scroll > elemPos - windowHeight + 200) {
      $(this).addClass("scrollin");
    }
  });
});

Comments

[k10a]

ご回答ありがとうございます。
何が原因かまで含め提示していただき感謝です！
無事、動きました。

Answer 2

$(function() {
  $(window).trigger('scroll');
});

Comments

[k10a]

ご回答ありがとうございます！