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

案件対応中に、画面のスクロールに伴って画面左(もしくは右)に配置したメニューが追従してくる「フローティングメニュー(エレベーターメニュー)」の実装を検討しました。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のサイトにてご覧ください。