jQueryでスクロールして画像を下から出現させる際の画像の位置取得のやり方

Question

お世話になります。

jqueryでスクロールした際に画像が下から出現する際に画像の位置取得のやり方で理解ができていないところがあり質問させて頂きます。

以下がそのコードになります。

$(function(){
    $(window).scroll(function (){
        $('.fadein').each(function(){
            var targetElement = $(this).offset().top;
            var scroll = $(window).scrollTop();
            var windowHeight = $(window).height();
            if (scroll > targetElement - windowHeight + 200){
                $(this).css('opacity','1');
                $(this).css('transform','translateY(0)');
            }
        });
    });
});

こちらのコードは下記のサイトから引用しています。
http://ishi-note.com/6814.html

$(this).offset().topは、ターゲット要素の高さ
$(window).scrollTop();は、スクロール位置（ページの一番上からディスプレイ上端）
$(window).height();は、ウィンドウの高さ

を取得しておりif(scroll > targetElement - windowHeight + 200)の部分で画像の位置を取得していると思います。

しかし　scroll > targetElement - windowHeight + 200　でなぜ画像の位置が取得できるのかイメージができていません。

ご教授よろしくお願いいたします。

Answer 1

1個ずつ分解していけば明白です。

var targetElement = $(this).offset().top;

対象要素の左上の座標のtop（画面最上部からの距離）を取得しています。
offset()

scroll は現在のスクロール量
これは「画面左上端を0,0として移動した距離」とほぼ同じなると思って良いです。

$(window).height()で画面の高さ

つまり

scroll > targetElement - windowHeight + 200

は

現在のスクロール量 > 対象要素のトップからの距離 - 画面の高さ + 200

となっています。
文字よりも図にしてみた方が良いかもしれません。

200は「見え方をよりそれっぽく見せるための補正数値」と思って良いと思います。
この数値が0だとどのタイミングで要素がどのように動くか
上げたり下げたり試してみると良いです。

ひとまず、各数値を画面のどこかに出力するようにしておくと、見えてくるところがあります（consoleだとかなりうるさいことになるので、画面上に出力した方が良い）