2017年4月18日火曜日

Bloggerのグローバルナビをスクロールしてトップで固定する方法 | 日々のメモ帖 by holidaybuggy1980 holidaybuggy1980
300 300

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

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

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

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

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

  1. テーマのHTML編集より、テンプレートのコードを表示し、下記コードを検索する。
<div class='tabs-outer'>
  1. 検索したコードを下記のように書き換える。
<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"/>


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


  • このエントリーをはてなブックマークに追加
  • list


ブログランキング・にほんブログ村へ

2 件のコメント:

  1. 初めまして。myと申します。
    最近bloggerに引っ越して来て、四苦八苦しながらカスタマイズしています。
    holidaybuggy1980様の記事とても参考になります。
    この度、こちらのグローバルナビを設置したいと思い挑戦しておりますが、
    jQueryをどこへ追加したら良いのか分かりません。
    よかったら教えていただけますか?
    よろしくお願いします。

    返信削除
    返信
    1. </body>の直前で大丈夫かと思います。

      削除