jQueryを使い、メニューが縦スクロールで上まで来たら固定表示させる方法

jQueryを使い、メニューが、縦スクロールで上まで来ても、隠れることなく固定表示させる方法。

jQueryを使わずに作る方法については、「JavaScriptで、メニューが縦スクロールで上まで来たら固定表示させる方法」のページへ。

実装例

実装例は、サンプルページにて。

実装例(サンプルページ)の動作について

サンプルページを縦スクロールし、「メニュー用のボックス要素」というテキストがある黒色のボックス要素が上まで来たら、隠れることなく固定される。

ソースコード

JavaScript

<script type="text/javascript">
jQuery( function() {
    var $offset = jQuery( '#globalMenu' ).offset();
    jQuery( window ).scroll( function () {
        if( jQuery( window ).scrollTop() > $offset.top ) {
            jQuery( '#globalMenu' ).addClass( 'fixedGlobalMenu' );
        } else {
            jQuery( '#globalMenu' ).removeClass( 'fixedGlobalMenu' );
        }
    } );
} );
</script>

id属性が「globalMenu」である要素が上まで来たら、その要素のclass属性に「fixedGlobalMenu」を追加する。

戻りは、class属性から「fixedGlobalMenu」を削除することで実現している。

HTML

固定表示させるメニュー用のボックス要素のHTML。

<div id="header">
    <div id="headerTitle">
        <h1>サンプルページ</h1>
    </div>
    <div id="globalMenu">
        メニュー用のボックス要素
    </div>
</div>

CSS

#globalMenu {
    width: 930px;
    background-color: black;
    color: white;
}
.fixedGlobalMenu {
    position: fixed;
    top: 0px;
}
#header {
    height: 84px;
}
#headerTitle {
    margin: 0 auto;
    padding: 10px;
    background-color: #bf7fff;
}
#headerTitle h1 {
    margin: 0 auto;
    padding: 0;
    background-color: #bf7fff;
}

スポンサード リンク

カテゴリー: API, JavaScript, jQuery, スクロール, 逆引き パーマリンク