Twitter

jQueryを使った長い縦スクロールページの現在地による制御

2012/02/09 | jquery | コメント (1)

パララックス(視差)効果やページ内のスムーズスクロールなど、見せ方に動きをつけた縦長1ページで構成されるhtmlサイトが流行っていますが、ページ内の現在位置を取得してナビゲーションをアクティブに変更したり、要素をフェードインしたりする必要があったのでメモ。jQueryを利用して実装しています。

※この記事は、webOpixelさんのエントリ「jQueryで長いページの区切り(セクション)ごとに背景を変化させる」を大変参考にさせていただきました。ソースも必要な箇所を大きく抜粋させていただいた形です。webOpixelさんの記事はどれも分かりやすく、丁寧に説明されているので非常に助かりました。m(_ _)m

<!-- htmlの構造 -->

<div class="section">
	section0
</div><!-- /section -->

<div class="section">
	section1
</div><!-- /section -->

<div class="section">
	section2
</div><!-- /section -->

<div class="section">
	section3
</div><!-- /section -->

・・・

javascriptは以下の通り。ナビのアクティブ化などは、chengeSection関数内に条件分岐で必要な処理を記述します。

$(function() {
	var secTopArr = new Array();
	var current = -1;

	// 各sectionの位置を入れる
	$('div.section').each(function (i) {
		secTopArr[i] = $(this).offset().top;
	});

	// スクロールイベント
	$(window).scroll(function () {
		for (var i = secTopArr.length-1; i>=0; i--) {
			if ($(window).scrollTop() > secTopArr[i] - 50) {
				chengeSection(i);
				break;
			}
		}
	});

	function chengeSection(secNum) {
		if (secNum != current) {
			current = secNum;
			// 現在地による制御 //////////////////////////////////////////////////////
			if (current == 0) {
				// 現在地がsection0の場合の処理
			} else if (current == 1) {
				// 現在地がsection1の場合の処理
			} else if (current == 2) {
				// 現在地がsection2の場合の処理
			} else if (current == 3) {
				// 現在地がsection3の場合の処理
			}
		}
	}
});

参考: jQueryで長いページの区切り(セクション)ごとに背景を変化させる | webOpixel
URL: http://www.webopixel.net/javascript/487.html


1件のコメント»

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

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

コメントをどうぞ »

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

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

Page top