【jQuery】ある特定の位置までスクロールしたら処理をしたい

スクロールがある特定の位置まで来たら処理をしたい場合があると思います。

今回はスクロールしたときにフッターが見えたら追従しているボタンを非表示にするという処理をしてみたいと思います。

サンプルとしてHTMLはヘッダー、追従ボタン、コンテンツ1～3、フッターを用意して動作を確認できるようにしました。

それでは見てみましょう。

HTML
CSS
jQuery
最後に

HTML

<header>ヘッダー</header>
<div class="content">
	<button>追従ボタン</button>
	<div class="box1">コンテンツ1</div>
	<div class="box2">コンテンツ2</div>
	<div class="box3">コンテンツ3</div>
</div>
<footer>フッター</footer>

CSS

header{
	width: 100%;
	height:80px;
	background: #e6e6fa;
}

.box1{background: #dcdcdc;}
.box2{background: #98fb98;}
.box3{background: #eee8aa;}

.box1,
.box2,
.box3{
	width: 100%;
	height:1000px;
}

footer{
	width: 100%;
	height:80px;
	background: #90ee90;
}

button{
	position: fixed;
	right: 0;
	bottom: 20px;

}

jQuery

var this_element;
jQuery(window).on('load',function(){
	this_element = jQuery('footer').offset().top + jQuery('footer').outerHeight();
});

jQuery(window).scroll(function(){
	if(jQuery(window).scrollTop() + jQuery(window).height() > this_element){
		jQuery('button').fadeOut();
	} else {
		jQuery('button').fadeIn();
	}
});

最後に

スクロールの処理はscrollイベントを使用すれば書き方はそれほど難しくないと思います。

ポイントとしては、ページがロードして要素が書き出されたらfooterまでのスクロール位置と高さをあらかじめ取得しています。

そしてスクロールイベントが発生したときに現在のスクロール位置とあらかじめ取得したスクロール位置によってボタンを非表示にしています。

リンク