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

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』というクラスを付けて実装してみました。

▽流れ

1. 『sikaku_box』を通過すると追尾（fixed）
2. 『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』より上部に戻ったらフェードイン
    }
  });      

サンプルページはこちら

メモ

jQueryのことで何かわからないことがあればjQueryの日本語リファレンスサイトがあるので一度チェックしてみるといろいろ解決できたりしますよ。

jQuery日本語リファレンス

jQuery（英語版）

さいごに

ふむふむ。もぐもぐ。

Googleさんの自動広告をつけてる場合は消える位置がずれると思われますのでその際は調整をー。

関連記事

【CSS】簡単に固定できるposition: sticky;の実装サンプル集