ページ途中にあるグローバルナビなどをスクロール時にトップに固定するjQuery
この記事を見つけて、普段使っている「Bizvector」だったらどうするんだろってチャレンジしてみました。
今回やったのはこんな感じ
が、スクロールさせるとこんな感じになります。
ではやってみましょう！
今回デザインスキンとしては「NEAT」を使っています。
編集対象は、header.php。それと、スタイルシートに少々追加。
header.phpを編集します。
まずは、スクリプトを設置します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<span style="font-size: 14pt;"><code> <?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> <!-- ここまで --> </code></span> |
jQueryを利用するため、ロード後に設置する必要が有ります。
今回は、</head>の直前に設定しました。
そしてメニュー部分の編集を行います。
|
1 2 3 4 5 |
<span style="font-size: 14pt;"><code> $gMenuHtml .= '<div id="fixedBox" class="nav">' ."\n"; $gMenuHtml .= $gMenu."\n"; $gMenuHtml .= "</div>\n"; </code></span> |
メニュー全体を<div>で囲います。
次にスタイルシートに追加。
|
1 2 3 4 5 6 7 8 |
<span style="font-size: 14pt;"><code> .fixed { position: fixed; top: 0; width: 950px; z-index: 10000; } </code></span> |
これはメニューをトップに固定する設定です。
どんな風に動くの？
画面をスクロールしていって、id=fixedBoxがスクロールトップに来たらclass=fixedが追加されて、メニューがトップ一に固定されます。
今回は、スマホ時の対応はしていません。
必要な方は、ご検討ください(^^)
では(^^)v
いつも参考にさせていただいております。
Bizvektorを使い始めた者です。
グローバルメニューを固定しようと試行錯誤しておりました。
こちらのブログを拝見して挑戦しましたが、メニュー部分の編集箇所が分からず奮闘中です。
よろしければ、メニュー部分の編集に関して詳しく教えていただけませんか？
こんにちは！
はい、OKです。
どのようにお伝えすればよろしいでしょうか？
お世話になります。
私もBizVektorを使い始めました。
ヘッダーメニューを固定する方法として、こちらのサイトの記述にたどり着きました。
やはり上記の方同様、header.phpのメニュー部分の修正がわからず、困っております。
$gMenuHtml .= ” .”\n”;
$gMenuHtml .= $gMenu.”\n”;
$gMenuHtml .= “\n”;
とメニュー全体をで囲む、という箇所がどうしても理解できません。
詳しく教えていただけるとありがたいのですが。
よろしくお願いいたします。
すみません。見逃していました。
$gMenuHtmlに保存された内容がメニューのhtmlとして出力されていきます。
そしてメニューの内容が $gMenuの中に格納されています。
また、JavaScriptで固定属性(ここではfixedクラス)を付加するかどうかの制御を行っています。
ですので、スクロールが一定の場所に来たとき、メニューを固定してしまうようにしています。