読者です 読者をやめる 読者になる 読者になる

Minimal Green

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

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

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

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

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

    <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;/* 余白が気になる時は適時調整 */
}

これで最初はメニューの位置はタイトル下ですが、スクロールするとトップに固定します。

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

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

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


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