javascriptでスクロールすると上部で固定されるメニューにする。

Last Updated on 2014-12-23 by

グローバルメニューはいつも見える場所にあるのが理想的な場合が多いので、当サイトでもグローバルメニューをスクロールしても上部に固定される様にしてみました。ページをスクロールした事をJavascriptで認識し、グローバルメニューのID属性にclassを追加するというのが肝となります。

ヘッダーに以下を追加。Wordpressなのでjquery.min.jsの行はなしでもOKです。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript"> 
jQuery(function() {
    var nav = jQuery('#primary-nav');
    var offsetTop = nav.offset().top;
    var floatMenu = function() {
        if (jQuery(window).scrollTop() > offsetTop) {
            nav.addClass('fixed');
        } else {
            nav.removeClass('fixed');
        }
    }
    jQuery(window).scroll(floatMenu);
    jQuery('body').bind('touchmove', floatMenu);
});
</script>

CSSには以下を追加します。

.fixed {
	display: block;
	position: fixed !important;
	top: 0;
	background-color: #CCC;
	z-index: 500;
	width: 100%;
}

デモは当サイトのメニューで再現しています。
サイトのCSSやjQueryの利用環境などによって記述が変わってきます。

ホームページのお困りごと解決の方向へ

Follow me!