facebook twitter youtube
Salesforce Java Android PHP JavaScript MySQL Perl node.js HTML iOS
in JavaScript - 05 12月, 2013
by mr58 - no comments
ページスクロールのカスタマイズ

今会社の公式サイトをリニューアルすべく、作成しているページで少し作りこんだので記録します。

まずはベースとなるJavaScript↓

var index_section_idname = 'index_section';
var index_tposArr = new Array(index_section_num);
var index_transArr  = new Array(0.3, 0.1, 0.3, 0.4, 0.3, 0.4);

$(document).ready(function()
{
	for (var i = 0 ; i < index_section_num; i++)
		index_tposArr[i] = $('#'+index_section_idname+(i+1)).offset().top;

});

$(window).bind('scroll', function()
{
	for (var i = 0; i < index_section_num ; i++)
	{
		$('#'+index_section_idname+(i+1)).delay(10).animate(
			{top : index_tposArr[i] - ($(window).scrollTop() * index_transArr[i])}, 700, 'easeOutQuart');
	}

});

これによって下記のようなページの「ブロック1~n」のスクロールに少し変化が出せます。
zu1
これが
zu1
こんな感じにずれます。
※サンプルの数値とは関係ないです。イメージとして

この時に例えば「ブロック2」は画面の最上部まで行ったらそれ以上スクロールしてほしくなかったので下記のように変更しました。

var index_menu_num    = 2;
var index_section_idname = 'index_section';
var index_tposArr = new Array(index_section_num);
var index_transArr  = new Array(0.3, 0.1, 0.3, 0.4, 0.3, 0.4);

$(document).ready(function()
{
	for (var i = 0 ; i < index_section_num; i++)
		index_tposArr[i] = $('#'+index_section_idname+(i+1)).offset().top;

});

$(window).bind('scroll', function()
{
	// スクロールのスムージングを調整
	for (var i = 0; i < index_section_num ; i++)
	{
		var speed = 700;

		// メニューのみ最上部に来たらそこで固定する(下がったら解除する)
		if ((i + 1) == index_menu_num)
		{
			var menu_id = '#'+index_section_idname+index_menu_num;
			if($(window).scrollTop() > index_tposArr[i])
			{
				$(menu_id).css('top', '0');
				$(menu_id).css('position', 'fixed');
				continue;
			}
			else
				$(menu_id).css('position', 'absolute');

			// メニューのスピード調整
			speed = 0;
		}

		$('#'+index_section_idname+(i+1)).delay(10).animate(
			{top : index_tposArr[i] - ($(window).scrollTop() * index_transArr[i])}, speed, 'easeOutQuart');
	}
});

簡単に説明すると
指定のブロック(メニュー)の処理が走るとき(21行目で判定)
現在の位置が最上部以上であるなら(24行目で判定)

  1. スタイルシートの「top」を「0」にする(26行目)
  2. スタイルシートの「position」を「fixed」にする(27行目)
  3. これ以上処理をしない(スクロール処理をしない=停止する)(28行目)

と処理をし、現在の位置が最上部に満たない場合は

  1. スタイルシートの「position」を「absolute」にする(31行目で判定)

と指定しております。
これによって画面の最上部に来た際にこれ以上スクロールされなくなり
再び戻った時には元通りの処理に戻るようにしてます。

18行目でspeed値を可変化しているのは、スクロールの位置がピタッと最上部に一致しないと
それらの位置調整時、easingのアクションeaseOutQuartを実行している際に
見かけ上問題があったため、34行目で指定のブロック(メニュー)の処理をする場合は
実質的にスピードを0にすることで見る事ができないため無効としてます。

これをベースに、停止する位置を最上部ではなく、少し潜らせる事もできます。
やり方は簡単で24行目と26行目にその分の位置だけズラしてあげればOK
そこだけ抜粋すると

			if($(window).scrollTop() > (index_tposArr[i] - 60))
			{
				$(menu_id).css('top', '-60px');
				$(menu_id).css('position', 'fixed');
				continue;
			}

こんな感じ。
サンプルイメージは↓
demo1

demo2
こうなります。
※サンプルはメニューのアイコン部分まで見せると邪魔なので文字まで隠してます。

ちなみに上記サンプルはこれからリニューアルする会社の公式サイトです。
まだ微調整してますが近々公開予定ですので、ソースなどの絡みはそちらで確認してください。