Bloggerのグローバルナビをスクロールしてトップで固定する方法

下記リンクにて、グローバルナビをスクロールしてトップで固定する方法を説明しました。

ブログやホームページのグローバルナビをスクロール時にトップ固定する方法

今回は、Bloggerのテンプレートにて設定する方法について書きたいと思います。

固定するグローバルナビの範囲を指定

1. テーマのHTML編集より、テンプレートのコードを表示し、下記コードを検索する。

<div class='tabs-outer'>

2. 検索したコードを下記のように書き換える。

<div class='tabs-outer' id='menu'>

このコード変更の意味は、divタグで囲まれている部分のidを「menu」にするということで、Bloggerテンプレートでグローバルナビ部分全体を定義しているdivタグが上記のタグですが、テンプレートによっては違うclassのdivタグになっているかもしれないので、各自確認してから行うとよいでしょう。

この後で説明するjQueryのコードでこのidで固定する範囲を指定するため必要となります。

固定するためのCSSを追加

テーマのHTML編集より、テンプレートのコードを表示し、下記のコードをCSS部分に追加する。

.fixed {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10000;
}

こちらのCSSは、この後で説明するjQueryのコードにて、スクロールして固定させる部分がトップに到達したときに、fixedというclassを追加するコードになっているため、classがfixedとなっているdivタグで囲まれた部分を固定するという意味合いです。

動作させるjQueryを追加

下記コードをjQueryを読み込んだ後に追加する。

<script>
jQuery(function($) {
  
var nav    = $('#menu'), //グローバルナビ部分のidを指定
    offset = nav.offset();  //グローバルナビ部分の位置
  
$(window).scroll(function () {
  if($(window).scrollTop() > offset.top) {
    nav.addClass('fixed');　//スクロール位置がトップより多い場合は固定させる
  } else {
    nav.removeClass('fixed');　//トップまで到達してない場合は固定しない
  }
});
  
});
</script>

なお、初めてjQueryを追加する場合、上記コードの前に下記コードを追加する。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"/>

以上、参考にしていただけたら幸いです。