ページスクロールのカスタマイズ

2013年12月5日 2023年6月16日

mr58

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

まずはベースとなる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');
	}

});

これによって下記のようなページの「ブロック１～ｎ」のスクロールに少し変化が出せます。

これが

こんな感じにずれます。
※サンプルの数値とは関係ないです。イメージとして

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

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行目で判定）

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

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

スタイルシートの「position」を「absolute」にする（31行目で判定）

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

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

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

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

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

が

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