【jQuery】スクロールして、指定した場所から出てきて、指定した場所で消える

指定した場所で出したいのですよー

そして指定した場所で消したいのですねー

実装サンプル

HTML

<section>
  <div class="area">
    <div class="title">【jQuery】<br>スクロールして、指定した場所から出てきて、指定した場所で消える、実装サンプル</div>
    <p class="_a"><a href="https://125naroom.com/web/4582" target="_blank" class="link">View the note</a></p>
  </div>
  <div class="area" id="start">
    <div class="title">しかくが出てきますよ</div>
  </div>
  <div class="area">
    <div class="title">出てますね</div>
  </div>
  <div class="area" id="end">
    <div class="title">しかくが消えますよ</div>
  </div>
  <div class="area">
    <div class="title">消えてますね</div>
  </div>
</section>
  
<div class="sikaku_box">しかく</div>

CSS

.sikaku_box {
    position: fixed;
    right: 0;
    bottom: 0;
    opacity: 0;
    z-index: -1;
    transition: 0.3s;
}
.sikaku_box.fixed {
    opacity: 1;
    z-index: 9;
}

JavaScript

▽jQuery使用

$(function () {
  $(window).on('load scroll', function () { //スクロールするよ
    var scrollHeight = $(document).height(); //ページ上部からの距離を取得
    var scrollPosition = $(window).height() + $(window).scrollTop(); //Windowの高さを取得+スクロール位置を取得
    var startHeight = $("#start").innerHeight(); //場所指定（ここでは出てくる場所）
    var endHeight = $("#end").innerHeight(); //場所指定（ここでは消える場所）
    if (startHeight <= $(this).scrollTop()) { //スクロール距離が『#start』を超えたら
      $('.sikaku_box').addClass('fixed'); //fixedというclassを追加
      if (scrollHeight - scrollPosition <= endHeight) { //スクロール距離が『#end』を超えたら
        $('.sikaku_box').removeClass('fixed'); //fixedというclassを削除
      } else {
        $('.sikaku_box').addClass('fixed'); //fixedというclassを追加
      }
    } else {
      $('.sikaku_box').removeClass('fixed'); //fixedというclassを削除
    }
  });
});