スクロールして要素が見えたら表示し、要素の最下部が見えたら非表示にする

前提・実現したいこと

js（jquery）にて、スクロールして要素が見えたら表示し見えなくなったら非表示にする…という動作を実装していますが上手くいかない状況です。
下記サイトを参考にさせて頂きました。
https://hajimete.org/jquery-scroll-fade2

問題内容は下記のとおりで、これを要素（[data-scroll="target"]）が終わるぴったりの場所で非表示にする方法をご教示頂きたいと考えております。

発生している問題

ある程度意図通りの挙動になるのですが、要素（[data-scroll="target"]）が終わるぴったりの場所で「非表示にする動作」が動きません。
少し通りすぎたところで消える…というような動きになってしまいます。

該当のソースコード

js
1$(function() {
2  $(window).on("scroll", function() {
3    var tgt = $('[data-scroll="target"]').offset().top; // ターゲットの位置取得
4    var pos = tgt - $(window).height(); // 画面下部からのターゲットの位置
5    var tgtHeight = $('[data-scroll="target"]').height();
6
7    if ($(window).scrollTop() > pos && $(window).scrollTop() < tgtHeight) {
8      $('.hoge').fadeIn();
9    } else {
10      // 非表示にする動作
11      $('.hoge').fadeOut();
12    }
13  });
14});