スクロール完了（停止）の検出と、フローティングメニューの実装

案件対応中に、画面のスクロールに伴って画面左（もしくは右）に配置したメニューが追従してくる「フローティングメニュー（エレベーターメニュー）」の実装を検討しました。Google検索でjQueryプラグインを探すと、3年ほど前から更新されていないプラグインや、jQuery公式サイトのPluginsから消えてしまっているプラグインばかりでしたので、サンプルスクリプトを公開します。

本サンプルをたたき台としてご利用頂ければと思いますが、「いいね」が多いようでしたらプラグイン化も検討してみたいと思います。

スクロール完了（停止）の検出...カスタムイベント「scrollFinish」について

スクリプトの大枠は「windowオブジェクトのscrollイベントを検出したら、メニューの移動を実行する」という簡単なものですが、画面をスクロールしている間は常にscrollイベントが発生しています。そのため、メニューの移動処理が何度も呼び出され、メニューの動きがカクカクしてしまう原因となります。

そこで、タイマーを利用し、スクロールが完了（停止）した際に「scrollFinish」というカスタムイベントが発生するようにし、scrollFinishイベントをキャッチしたらメニューの移動を実行するようにしました。

なお、最初はカスタムイベント名を「scrollEnd」にしようかと思っていたのですが、ページのしたまでスクロールしたことを検出するイベントとして既に使われつつあったので、「scrollFinish」とした次第です。


$(function () {
 // 変数宣言
 var $window = $(window),
 $document = $(document),
 timerId;

 // スクロール停止イベントのバインド
 $window.bind("scrollFinish", function (event, scrollTop) {
 // メニュー移動処理呼び出し（後に掲載するサンプルを参照して下さい）
 floatingMenu(scrollTop);
 });

 // スクロールイベントのバインド
 $window.bind("scroll", function () {
 var scrollTop = $document.scrollTop();
 if (timerId) {
 clearTimeout(timerId);
 }

 // 1秒間スクロールしない場合はscrollFinishイベントを呼び出し
 timerId = setTimeout(function () {
 timerId = null;
 $window.trigger("scrollFinish", [scrollTop]);
 }, 1000);
 });

 $window.unload(function () {
 $window.unbind("scroll scrollFinish");
 });
});

サンプル

「Result」をクリックすると、フローティングメニュー（エレベーターメニュー）の動作をご確認いただけます。

現在ご利用のブラウザではサンプルが表示できません。jsFiddleのサイトにてご覧ください。