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

2019.11.6
jQuery

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

なんだか複雑だー

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

実装サンプル
メモ
さいごに

1. 実装サンプル

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

サンプルページはこちら

HTML

<div class="sikaku_box">しかく</div>

<div class="oneArea">
  <div class="one_title">まる</div>
</div>

<div class="end_box">しかくが消える</div>

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

▽流れ

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

サンプルページはこちら

CSS

▽ちょっと動きがあったほうが楽しいので以下のようにしっかりとCSSを書いてみました。

.sikaku_box {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100px;
	height: 100px;
	background: #fff689;
	font-size: 16px;
	font-weight: bold;
	top: 0;
	transition-duration: .6s;
}
.sikaku_box.fixed {
	position: fixed;
	top: 50px;
	left: auto;
	z-index: +1;
}
.sikaku_box.fixed.none {
	opacity: 0;
	z-index: -1;
}
.oneArea {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 1000px;
	background: #f2f2f2;
}
.oneArea .one_title {
	font-size: 30px;
	font-weight: bold;
}
.end_box {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 300px;
	padding: 20px;
	background: #000000;
	color: #fff;
	font-size: 30px;
	font-weight: bold;
}
@media screen and (max-width: 1024px) {
	.oneArea .one_title {
		font-size: 18px;
	}
	.end_box {
		font-size: 18px;
	}
}

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

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

サンプルページはこちら

JavaScript

▽jquery-1.11.3.min.js使用

$(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』より上部に戻ったらフェードイン
    }
  });

サンプルページはこちら