あるブロックが画面上にある時にバナーが消えるスクリプト

Question

現在特定のスクロール量でバナー表示を消すスクリプトを仕様しているのですが、
あるブロックがスクロールして消えると再表示するにはどのようにしたらよいか教えて頂けないでしょうか？
そのブロックが画面上にある時にバナーが消える仕様です。

また、スマホの解像度によってその要素のスクロール量が変わると思うので、
そのブロックの上下の位置の取得も必要な気がするのですが、やりかたがわかりません。

お解りの方よろしくお願いします。

<script type="text/javascript">
$(function () {
    var display = function () {
    if ($(this).scrollTop() > 3600) { 
            $(".block").fadeOut();
        } else {
            $(".block").fadeIn();
        }
    };
    $(window).on("scroll", display);

});
</script>

Answer 1

Intersection Observer API を使ってみては？

Intersection Observer API - Web API | MDN
Intersection Observerが簡単で便利！要素がビューポートに表示されているかを判定できる | コリス

Answer 2

以下の記事が参考になりませんでしょうか。
スクロールでふわっと現れるフェードインの動きをjQueryで実装

$(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)'
                });
            }
        });
    });
});