CSS と jQuery を使用してメニューの表示位置を固定する

Tweet

Pocket

【この記事を読むのに必要な時間は約 5 分です】

サイトの利便性を向上させるためのメニューを常に画面上の同じ位置に表示させておきたい場合、 CSS または javaScript を用いて表示位置を固定させることができます。

CSSでメニューの表示位置を固定する

基本的なパターンから。CSS のみを用いて、画面の初期表示時に画面上部に表示されているメニューを同じ位置に固定表示させます。

スクロールしてもメニューは画面上部に表示されたまま、位置が変わりません。

上記サイトの固定メニュー表示部分は以下のようなコードになります（抜粋）。position: fixed を指定することで flybar 要素を特定の位置に固定表示しています。
※ position: fixed は IE6 以前では未対応のため、動作しません。

html

<div id="flybar">
    <a id="logo" href="#top"><img src="/documentation/images/logo.png"
        width="225" height="39" alt="CoffeeScript" /></a>
</div>

CSS

#flybar {
   position: fixed;
   z-index: 100;
   height: 50px;
   min-width: 490px;
   left: 40px; right: 40px; top: 25px;
   padding-left: 252px;
   background: #eee;
   border: 1px solid #aaa;
   border-top: 1px solid #bbb;
   border-bottom: 1px solid #888;
}

#logo {
   display: block;
   outline: none;
   position: absolute;
   top: 0px; left: 10px;
}

#logo img {
   margin: 5px 0 0 3px;
}

参考

• CSS : positionの「absolute」「relative」「fixed」のリファレンス

jQueryで一定以上スクロールされたときメニューを固定する

画面の右側にメニュー（サイドバー）を表示している場合、画面下にスクロールしていくとコンテンツの長さによってメニューが表示されなくなることがあります。下にスクロールしていくとメニュー部分にはただの白い余白が・・・というのは UI 的に優しくありません。広告を表示しているサイトではクリック機会の損失にもなります。 以下はメニューの表示位置よりも下にスクロールされた場合、メニューを固定表示に切り替える実装例です。

CSS

.fixed{
   position: fixed;
   top: 0px;
   left: 0px
   z-index: 9999;
}

Javascript

$(function(){
    var box    = $('#fixedbox');
    var boxTop = box.offset().top;
    $(window).scroll(function () {
        if($(window).scrollTop() >= boxTop - 30) {
            box.addClass('fixed');
        } else {
            box.removeClass('fixed');
        }
    });
});

スクロールの位置 （ scrollTop() ） がメニューの位置 （ offset().top ） よりも下に移動したとき、 fixedbox 要素に fixed クラスを追加することで、メニューに position:fixed が適用され、画面の最上部に固定表示されます。

scrollTop、 offset().top はともに jQuery の関数で、座標位置を取得することができます。なお、左端からの位置は scrollLeft、 offset().left で取得することができるため、左右にスクロールさせる画面においても要素を固定表示させることができます。