ブログ上部に固定のメニューバーを表示する方法[jQuery]

更新日：2017/06/25

ブログデザインをリニューアルしましたが、その際に取り入れたカスタマイズについて、これから何回かにわたってご紹介していきたいと思います！

第一弾はこのブログの一番上に表示している固定のメニューバーです。

ここにFacebookページのいいねボタンやTwitterのフォローボタン、Googleのカスタム検索を設定してアクセスしやすいようにしてみました。

スクロールしてもそのまま固定させておくにはjQueryを駆使すると割と簡単にできます。

今回はこのブログの設定をもとに、固定のメニューバーを設置する方法をご紹介します！

ブログの上部に固定のメニューバーを置く方法

jQueryを使えるようにするには、外部のサーバーなどからファイルを読み込むか、自分のブログサーバーにjQueryのファイルを置いてそれを読み込むことが必要です。

設置しやすいのはGoogleのAPIを読み込む方法でしょうね。ファイルを読み込むために、以下のコードをブログのheader.phpに記述します。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

1	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

次はスクロールした時に、メニューバーの位置を指定するためのコードです。

<script type="text/javascript">
$(function() {
  var headerMenu = $('.headerMenu');
  var headerMenuTop = headerMenu.offset().top;
  $(window).scroll(function () {
     var winTop = $(this).scrollTop();
     if (winTop >= headerMenuTop) {
        headerMenu.addClass('headerFixed')
     } else if (winTop <= headerMenuTop) {
        headerMenu.removeClass('headerFixed')
     }
  });
});
</script>

$(function() {

var headerMenu = $('.headerMenu');

var headerMenuTop = headerMenu.offset().top;

$(window).scroll(function () {

var winTop = $(this).scrollTop();

if (winTop >= headerMenuTop) {

headerMenu.addClass('headerFixed')

} else if (winTop <= headerMenuTop) {

headerMenu.removeClass('headerFixed')

}

});

</script>

さらにCSSでメニューバーを固定する位置などを設定します。

.headerMenu {
   height: 36px;
   font-size: 85%;
   background: #2255AA;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 9999;
}
.headerFixed {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
}

.headerMenu {

height: 36px;

font-size: 85%;

background: #2255AA;

position: fixed;

top: 0;

left: 0;

width: 100%;

z-index: 9999;

}

.headerFixed {

position: fixed;

top: 0;

left: 0;

width: 100%;

}

最後に以下のコードをbodyタグの手前までに記述しました。これが、メニューバーになるので、この中にメニューバーに置いておきたい内容(このブログでは、FacebookページのいいねボタンやTwitterのフォローボタン、など)を記述して置きます。

<div class='headerMenu'>
// ここに置いておきたい内容を記述。
</div>

// ここに置いておきたい内容を記述。

</div>

ここでまでで、このブログと同じような固定のメニューバーができたと思います。後は好みにあわせてカスタマイズしてみてください！