【jQuery】スクロール途中から追尾（fixed）、指定位置（class）で消える

jQueryを使って、スクロールの途中から追尾（fixed）、そして、指定の位置（class）で消える、というのを実装してみたいと思います。

なんだか複雑だー

理解できれば意外と簡単ですー

実装サンプル

See the Pen 【jQuery】スクロール途中から追尾、指定位置（class）で消える、実装サンプル by 125naroom (@125naroom) on CodePen.

サンプルページはこちら

HTML

追尾（fixed）要素を『sikaku_box』というクラスを付けて実装してみました。

<div class="sikaku_box">しかく</div>
 
<div class="oneArea">
  <div class="one_title">まる</div>
</div>
 
<div class="end_box">しかくが消える</div>

▽流れ

『sikaku_box』を通過すると追尾（fixed）
『end_box』までスクロールすると『sikaku_box』が消える

サンプルページはこちら

CSS

必要なものだけ抜き出したCSSは以下になります。

.sikaku_box.fixed {
    position: fixed;
    top: 50px;
    left: auto;
    z-index: +1;
}
.sikaku_box.fixed.none {
    opacity: 0;
    z-index: -1;
}

サンプルページはこちら

JavaScript

▽jQuery使用

$(function(){
  var scrollStart = $('.sikaku_box').offset().top; //ページ上部からの距離を取得
  var scrollEnd = $('.end_box').offset().top; //ページ上部からの距離を取得
  var distance = 0;
 
  $(document).scroll(function(){
    distance = $(this).scrollTop(); //スクロールした距離を取得
 
    if (scrollStart <= distance) { //スクロール距離が『.sikaku_box』の位置を超えたら
      $('.sikaku_box').addClass('fixed'); //class『fixed』を追加
    } else if (scrollStart >= distance) { //スクロールがページ上部まで戻ったら
      $('.sikaku_box').removeClass('fixed'); //class『fixed』を削除
    }
 
    if (scrollEnd <= distance) { //スクロール距離が『.end_box』の位置を超えたら
      $('.sikaku_box').addClass('none'); //class『none』を追加
    } else{
      $('.sikaku_box').removeClass('none'); //『.end_box』より上部に戻ったらclass『none』を削除
    }
  });      
});

△
上記の15行目から19行目は、下記のように『fadeOut』、『fadeIn』でもオッケー。
※ちょっと動きを付けたい場合は上記のほうがおすすめです。
▽

  if (scrollEnd <= distance) { //スクロール距離が『.end_box』の位置を超えたら
    $('.sikaku_box').fadeOut(); //フェードアウト
  } else{
    $('.sikaku_box').fadeIn(); //『.end_box』より上部に戻ったらフェードイン
  }
});

サンプルページはこちら