Twitter

スクロール量に応じて特定の要素を表示/非表示

2012/10/09 | jquery | コメント (0)

このブログの右下に実装している「ページトップに戻る」ボタンは、
ページトップ時には非表示にし、ページを少しスクロールすると出現する仕組みになっています。
jQueryを利用すれば非常にカンタンなのでご紹介します。

<!-- html -->
<div id="pageTop">「ページトップに戻る」ボタン</div>
$(function(){
	$(window).scroll(function(){
		// 対象までの高さ
		var distanceTop = 100;

		// 対象に達しているかどうかを判別
		if ($(window).scrollTop() > distanceTop) {
			// していれば、pageTopをfadeIn
			$('#pageTop').fadeIn("slow");
		} else {
			// していなければ、pageTopをfadeOut
			$('#pageTop').fadeOut("slow");
		}
	});
});

この仕組みはパララックス(視差)効果を利用した縦スクロールサイトなどでは必ず使うと思います。

※仕組み自体は、以前ブログに書いた「jQueryを使った長い縦スクロールページの現在地による制御」とまったく同じなのですが、意外と使える小技なので肝となる部分を抜粋し、分かりやすくシンプルに書き直しました。


0 Comments»

コメントはまだありません。

このコメント欄の RSS フィード TrackBack URI

コメントをどうぞ »

初めてコメントされる方は管理人の承認が必要となります。承認されるまではコメントは表示されませんのでご了承ください。

CopyRight© 2017 2GRAVITY All Rights Reserved. | powered by WordPress

Page top