【jQuery】特定の位置から特定の位置まで要素を表示させる #JavaScript

こんにちは。E-kan株式会社の岡田です。

既存ページのABテストのため、外部ツールにjQueryでテストしたい要素を書き込んでページを上書きするという業務をよくやるのですが、この間またしても地味に苦労したので備忘録。
ざっくり必要なところだけ抜き出すとこんな感じです。

やりたいこと

スクロールして最初のCTAボタンが画面上から消えたらフッターにフロートボタンを表示させる
スクロールして最後のCTAボタンが画面上に表示されたらフッターのフロートボタンを非表示にする

<html>
  <body>

    <section>
      <a id="ctabutton_01" href="form.html">CTAボタン01</a>

      （本文省略。それなりに長いし途中にCTAボタン02〜04がある。）

      <a id="ctabutton_05" href="form.html">CTAボタン05</a>
    </section>

    <footer>フッター</footer>

    <a class="floatBtn" href="form.html">フロートボタン</a>

  </body>
</html>

jQuery

//フロートボタンを特定の位置から特定の位置まで表示させる
$(window).on('load',function(){//頁内の全ての要素が読み込まれてから実行
  //ドキュメント全体の高さ
  var pageHeight = $(document).height();
  //頁上部から最初のCTAボタンまでの距離 ＋ CTAボタンの高さ(outerHeight:ボーダーの外側の高さ)
  var ctaFirst = $('#ctabutton_01').offset().top + $('#ctabutton_01').outerHeight();
  //ドキュメント全体の高さ - 頁上部から最後のCTAボタンまでの距離
  var ctaLast = pageHeight - $('#ctabutton_05').offset().top;

  $(window).on('scroll',function(){//スクロールすると実行される
    //現在のトップからの位置 ＝ ウィンドウの高さ ＋ スクロールした高さ
    var scrollPosition = $(window).height() + $(window).scrollTop();
    //スクロールが最初のCTAボタンを超える＆最後のCTAボタンを超えない場合
    if ($(window).scrollTop() > ctaFirst && pageHeight - scrollPosition  >= ctaLast) {
      $('.floatBtn').fadeIn(100);//0.1秒で出現
    } else {//最初のCTAボタンを超えない＆最後のCTAボタンを超えた場合
      $('.floatBtn').fadeOut(100);//0.1秒で消える
    }
  });
});

ちなみにこのテスト案は、ABテストで負けて本番環境へはリリースされませんでした。
悲しいのでここで供養。