ブログ上部に固定のメニューバーを表示する方法[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>

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

ピックアップ記事

1: 最大60WのUSB-C PD充電器「AUKEY 72W ACアダプター PA-Y12」レビュー！追加のUSB-Aポート2つ、合計3ポートのパワフル充電で大活躍
AUKEYのUSB充電器「72W ACアダプター PA-Y12」を購入してみました。最大60WのUSB Type-C PD（Power Delivery）対応でワット数の異なるパソコンにもパワフル充電。追加のUSB-Aポート2つでスマホやタブレットの充電にも大活躍。使ってみた感想をご紹介します。

2: iPhoneで格安SIMを使って月額料金を節約！乗り換え方法と注意点は？
iPhoneで格安SIMを使って月額料金を節約したい！でも敷居が高くてわからない。そんな風に考えている人はきっと多いはず。ここではiPhoneで格安SIMを利用するまでの手順・乗り換え方法や注意点など、詳しくご紹介しています。

3: LGウルトラワイドモニター「29UM69G-B」の口コミレビュー。12インチMacbookもMacbook Air 11インチも大画面で超快適な作業環境を実現できた！
快適なパソコン作業環境を求めて21:9ウルトラワイドモニターを購入してみました。それがLGエレクトロ二クスの「29UM69G-B」29インチです。1枚のディスプレイでスクエアタイプのモニター2枚分の広さを実現。ウィンドウを並べての作業が捗りますね！商品の特徴や使ってみた感想をご紹介します。

4: ポータブルハードディスク「WD Elements」レビュー！外部電源不要、気軽に大容量HDDが持ち運びできる！
パソコン内のデータ整理とバックアップ目的でポータブルハードディスクを購入してみました。それがウエスタンデジタルの「WD Elements Portable」です。大容量なのに小さくて収納や持ち運びが楽です。商品の特徴や使ってみた口コミもご紹介します。

5: 機種変更時に最適なiPhoneバックアップ方法！ iTunesの暗号化バックアップから復元すればデータ移行が楽にできます
機種変更時に最適なiPhoneのバックアップ方法をご紹介しています。iCloudバックアップではなく、iTunesの暗号化バックアップから復元することでスムーズにデータ移行できます。各アプリのIDやパスワードも引き継ぐにはこの方法がおすすめですよ。詳しい手順も解説していますので、ぜひ参考にしてみてくださいね。

-WordPressカスタマイズ