Bizvectorでグローバルメニューを固定する

ページ途中にあるグローバルナビなどをスクロール時にトップに固定するjQuery

この記事を見つけて、普段使っている「Bizvector」だったらどうするんだろってチャレンジしてみました。

今回やったのはこんな感じ

が、スクロールさせるとこんな感じになります。

ではやってみましょう！

今回デザインスキンとしては「NEAT」を使っています。
編集対象は、header.php。それと、スタイルシートに少々追加。
header.phpを編集します。

まずは、スクリプトを設置します。

<?php wp_head(); ?>

<!-- メニューを固定する -->
<script type="text/javascript">
jQuery( function($) {
  var nav    = $('#fixedBox' ),
      offset = nav.offset();
  $(window).scroll( function(){
    if( $(window).scrollTop() > offset.top ){
      nav.addClass( 'fixed' );
    } else {
      nav.removeClass( 'fixed' );
    }
  });
});
</script>
<!-- ここまで -->

jQueryを利用するため、ロード後に設置する必要が有ります。
今回は、</head>の直前に設定しました。

そしてメニュー部分の編集を行います。

$gMenuHtml .= '<div id="fixedBox" class="nav">' ."\n";
$gMenuHtml .= $gMenu."\n";
$gMenuHtml .= "</div>\n";

メニュー全体を<div>で囲います。

次にスタイルシートに追加。

.fixed {
  position: fixed;
  top: 0;
  width: 950px;
  z-index: 10000;
}

これはメニューをトップに固定する設定です。

どんな風に動くの？

画面をスクロールしていって、id=fixedBoxがスクロールトップに来たらclass=fixedが追加されて、メニューがトップ一に固定されます。

今回は、スマホ時の対応はしていません。
必要な方は、ご検討ください(^^)

では(^^)v