今会社の公式サイトをリニューアルすべく、作成しているページで少し作りこんだので記録します。
まずはベースとなる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」のスクロールに少し変化が出せます。
これが
こんな感じにずれます。
※サンプルの数値とは関係ないです。イメージとして
この時に例えば「ブロック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行目で判定)
- スタイルシートの「top」を「0」にする(26行目)
- スタイルシートの「position」を「fixed」にする(27行目)
- これ以上処理をしない(スクロール処理をしない=停止する)(28行目)
と処理をし、現在の位置が最上部に満たない場合は
- スタイルシートの「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; }
こんな感じ。
サンプルイメージは↓
が
こうなります。
※サンプルはメニューのアイコン部分まで見せると邪魔なので文字まで隠してます。
ちなみに上記サンプルはこれからリニューアルする会社の公式サイトです。
まだ微調整してますが近々公開予定ですので、ソースなどの絡みはそちらで確認してください。