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

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

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

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

スクリーンショット 2015-07-18 4.48.21

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

スクリーンショット 2015-07-18 4.50.01

ではやってみましょう!

今回デザインスキンとしては「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

Bizvectorでグローバルメニューを固定する” に対して 4 件のコメントがあります

  1. 坂井 より:

    いつも参考にさせていただいております。
    Bizvektorを使い始めた者です。
    グローバルメニューを固定しようと試行錯誤しておりました。
    こちらのブログを拝見して挑戦しましたが、メニュー部分の編集箇所が分からず奮闘中です。
    よろしければ、メニュー部分の編集に関して詳しく教えていただけませんか?

    1. iPhoneアプリ作成家くまかけ より:

      こんにちは!
      はい、OKです。
      どのようにお伝えすればよろしいでしょうか?

  2. コイデ より:

    お世話になります。
    私もBizVektorを使い始めました。
    ヘッダーメニューを固定する方法として、こちらのサイトの記述にたどり着きました。
    やはり上記の方同様、header.phpのメニュー部分の修正がわからず、困っております。

    $gMenuHtml .= ” .”\n”;
    $gMenuHtml .= $gMenu.”\n”;
    $gMenuHtml .= “\n”;
    とメニュー全体をで囲む、という箇所がどうしても理解できません。
    詳しく教えていただけるとありがたいのですが。
    よろしくお願いいたします。

    1. aa145enyhh より:

      すみません。見逃していました。

      $gMenuHtmlに保存された内容がメニューのhtmlとして出力されていきます。
      そしてメニューの内容が $gMenuの中に格納されています。
      また、JavaScriptで固定属性(ここではfixedクラス)を付加するかどうかの制御を行っています。

      ですので、スクロールが一定の場所に来たとき、メニューを固定してしまうようにしています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です