Minimal Green

はてなブログカスタマイズや、HTML、CSS、サイト制作などについて書いています。

スクロールするとトップに固定するメニュー(はてなブログPro向け)

注意:このカスタマイズははてなブログPro向けです。無料ユーザーがはてなグローバルヘッダーを隠すと規約違反ですのでこのカスタマイズはできません。

スクロールするとトップに固定するメニュー

スクロールするとトップにメニューを固定するには以下の①と②のコードを追加して下さい。#menuはこのブログの場合です。お使いのメニューのhtmlで指定されたclassやidに置き換えて下さい。
①フッタに追加コード
jQery読み込んでない方は先にこちらをフッタに追加。

<!--jQueryを使用-->
<script src="https://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    jQuery(function($) {
    var nav    = $('#menu'),
      offset = nav.offset();
    $(window).scroll(function () {
    if($(window).scrollTop() > offset.top) {
      nav.addClass('fixed');
    } else {
      nav.removeClass('fixed');
    }
    });
    });
</script>

②デザインCSSに追加コード

.fixed {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 10000;
}
#blog-title {
  margin: 0 auto;
  padding: 40px 0;/* 余白が気になる時は適時調整 */
}

これで最初はメニューの位置はタイトル下ですが、スクロールするとトップに固定します。(ズレる場合は.fixedにleft:0;も追加してみてください。)

メニューを常にトップに固定する

最初からトップに固定されたメニュー(はてなブログProのみ対象)
最初からトップに固定するには、上記の①と②のコードは追加せず、以下のコード③のみデザインCSSに追加して下さい。
③メニューの位置を常にトップに固定

#menu{
    position: fixed;
    top:0;
    left: 0;
    z-index: 10000;
}


Pro以外の無料ユーザがこのカスタマイズを行うと規約違反です。
スクロールするとトップに固定する方法についてはてなに問い合わせました。
追記:はてなより返答がありました。このカスタマイズははてなブログProのみOKです。

カスタマイズ目次

  • グローバルメニュー
  • シェアボタン
  • 囲み枠
  • ガーリーデザイン
  • ヘッダー周り
  • フッター周り

はてなブログテーマ制作

有料カスタマイズサービス

有料にてはてなブログ・アメブロ・WordPressカスタマイズ・制作承っております。

 最新記事