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

<section class="appear_section">
  <div class="area">
    <div class="title">スクロールしてみてください</div>
  </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>

/*================
.sikaku_box
================*/

.sikaku_box {
  position: fixed;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  background: #e8dc6a;
  box-sizing: border-box;
  font-size: 16px;
  font-weight: bold;
  opacity: 0;
  z-index: -1;
  transition: .3s;
}
.sikaku_box.fixed {
  opacity: 1;
  z-index: 9;
}

/* スクロールする場所（見た目。なくても動きます） */
.appear_section .area {
  height: 1000px;
  padding: 20px;
  background: #f3efe6;
}
.appear_section .area:nth-child(even) {
  background: #fff;
}
.appear_section .title {
  font-size: 30px;
  font-weight: bold;
}
@media screen and (max-width: 1024px) {
  .appear_section .title {
    font-size: 18px;
  }
}

/* 動きを減らす設定のとき */
@media (prefers-reduced-motion: reduce) {
  .sikaku_box { transition: none; }
}

$(function () {
  function sikaku() {
    var scrollTop = $(window).scrollTop(); //スクロール位置を取得
    var startPosition = $('#start').offset().top; //場所指定（ここでは出てくる場所）
    var endPosition = $('#end').offset().top; //場所指定（ここでは消える場所）
    if (startPosition <= scrollTop && scrollTop < endPosition) { //『#start』を超えて、『#end』より上のあいだ
      $('.sikaku_box').addClass('fixed'); //fixedというclassを追加
    } else {
      $('.sikaku_box').removeClass('fixed'); //fixedというclassを削除
    }
  }
  sikaku(); //ページを開いたときにも一度たしかめる
  $(window).on('scroll', sikaku); //スクロールするよ
});