> JavaScript/jQuery > スクロールすると画面の上部でメニューを固定するjQuery

スクロールすると画面の上部でメニューを固定するjQuery

コンテンツ量の多い画面では、画面上部のメニューに戻るのに「画面上部に戻るボタン」を実装していることが多いですが、画面の高さが狭くなることさえ了承できれば、メニューを画面上部に固定していてもいいかもしれません。
ただし、最初からメニューを画面上部に固定しているとサイトのデザインが限定されてしまいます。

画面をスクロールし、メニューバーが画面上部に到達した時点でメニューを固定し、画面上部に戻ると固定が外れるようにするには、下記のjQueryを利用して下さい。

デモ画面

今回は、id="menu"というdiv要素fixedというクラスを使って固定します。
画面をスクロールした時にmenuというIDのdiv要素が画面上部に到達したタイミングでfixedというクラスをつけます。

headタグ内に下記スクリプトとソースを挿入してください。

jqueryサンプル

    <script>
        jQuery(function($) {
            var target = $('#menu'),
            offset = target.offset();

            $(window).scroll(function () {
                if($(window).scrollTop() > offset.top) {
                    target.addClass('fixed');
                } else {
                    target.removeClass('fixed');
                }
            });
          
        });
    </script>

CSSサンプル

    <style type="text/css">
        .fixed{position: fixed; top: 0;}
    </style>

この記事が気に入ったらシェアしてください

関連記事

jQueryでチェックボックスを操作する方法まとめ【2021年版】

jQueryでチェックボックスを操作する方法まとめ【2021年版】

jQueryプラグイン「Colorbox」でYoutube動画をモーダルで表示してみる(レスポンシブ対応済)

jQueryプラグイン「Colorbox」でYoutube動画をモーダルで表示してみる(レスポンシブ対応済)

jQueryプラグイン「Colorbox」でHTMLタグや外部HTMLファイルをモーダルで表示してみる

jQueryプラグイン「Colorbox」でHTMLタグや外部HTMLファイルをモーダルで表示してみる

簡単にモーダルウィンドウを実装できるjQueryプラグイン「Colorbox」

簡単にモーダルウィンドウを実装できるjQueryプラグイン「Colorbox」

SyntaxHighlighterでの表示を色々カスタマイズしてみる

SyntaxHighlighterでの表示を色々カスタマイズしてみる

クリックするとトリガーが×になるドロワーメニュー

クリックするとトリガーが×になるドロワーメニュー

Comment Form

コメント投稿はこちらをクリックしてください
  • コメントを入力してください。
登録フォーム
Name
Mailaddress
URL
Message
Postkey
(スパム対策に、投稿キー を半角で入力してください。)