こんにちは。シンプルライフ ナビです。
ブログにグローバルメニュー・バーを設定している人は多いと思います。
以前の記事で、グローバルメニュー（グローバルナビゲーション）をコピペで簡単に設定できる方法をご紹介していますので、参考にしてください。
ところで、画面スクロールした時、グローバルメニュー（グローバルナビ）が上部にきたら固定するには、どうしたらいいのかな？ と思ったことはありませんか？
常にメニューが表示されていれば、メニューを選択しやすいので、ブログの回遊率向上（PV向上）につながりますよ。
この記事では、ブログのグローバルメニューが画面上部にきたら固定する方法を、CSSとHTMLのコード付きで解説します。
グローバルメニューが画面の上部にきたら固定する方法
画面スクロールしたとき、グローバルメニューが上部に来たら、画面の上部に固定できるといいな、と思ったことはありませんか？
実現できるとブログの読者がメニューを選択しやすくなります。
また、画面の動きに合わせて、グローバルメニューが動いたり、固定されたりするので、ブログの見た目の動きがおしゃれで洗練されたものになります！
どうすれば良いでのしょうか？
私が設定した方法をご紹介します！
jQueryというコードを利用すると、簡単に設定できますよ！
jQueryって何？という人も、この記事の手順で設定（コピペ）すれば、このブログの画面と同じような設定*1をすることができますので、試してみてください。
グローバルメニュー（グローバルナビ）を画面上部に固定するコード
それでは、グローバルメニューが画面上部までスクロールしたら、上部に固定表示するコードを確認していきましょう。
なお、前提とするグローバルメニューは、この記事の冒頭でもご紹介した、次の記事の内容で設定しているグローバルメニューを使います。*2
HTMLコード等をコピペで利用される場合は、上記の記事に沿ってグローバルメニューをブログに設定すれば、この記事でご紹介のコードをコピペするだけで動きます。*3
次のHTMLとCSSのコードを、手順に沿って追記してください。
HTMLコードの記述（追記内容）
HTMLコードを記述する場所は次の通りです。
ダッシュボード画面 → デザイン → カスタマイズ → ヘッダ → ブログタイトル下 にすすみ、既存のコードを消さないように注意して、HTMLコードを追記してください。
追記するHTMLコードは次の通りです。
<!-- jQuery Ver3.6利用 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var nav = $('#global-nav');
var navTop = nav.offset().top;
$(window).scroll(function () {
var winTop = $(this).scrollTop();
if (winTop >= navTop) {
nav.addClass('global-nav-fixed')
} else if (winTop <= navTop) {
nav.removeClass('global-nav-fixed')
}
});
});
</script>
上のコードを追記するだけです。コピペすれば簡単に設定できますよ！
なお、すでにjQueryの利用をブログに設定済みの方は緑色のコード部分はコピペ不要です。不明の場合は緑色部分のコードも含めてコピペしてください。
グローバルメニューを独自設定している人の場合は、上記の紫色の部分で参照しているクラス設定やid設定を、ご自身で設定されているコードの内容読み替えて設定いただければ利用できます。
CSSコードの記述（追記内容）
CSSコードを記述する場所は、次の通りです。
ダッシュボード画面 → デザイン → カスタマイズ → デザインCSS にすすみ、既存のコードを消さないように注意して、既存のコードの後ろにCSSコードを追記してください。
デザインCSSに追記するCSSコードは次の通りです。
/*グローバルナビ 上に固定*/
.global-nav-fixed {
position:fixed;
top:0;
left:0;
width: 100%;
z-index: 20;
animation:fade-in 0.5s;
}
@keyframes fade-in {
0%{margin-top:-64px;}
100%{margin-top:0;}
}
CSSコードの追記も簡単にできたのではないでしょうか。
（緑色部分のコードはなくてもOKです。好みに応じてご利用ください。）
グローバルメニューの動きのカスタマイズが完成
グローバルメニューの設定とカスタマイズ、できましたか？
最近のスマホ向けサイトでは、メニューをスライド式にして、上部に表示を固定しているサイトを多く見かけるようになりました。
そこで、私のブログでも同じように表現できるようにしてみたので、みなさんにもコードをご紹介しました。
このブログは、はてなブログを利用しています。
ブログのカスタマイズをしてみたい方は「はてなブログPro」にするのがおすすめです。
あなたのブログのカスタマイズの参考になれば幸いです。
