ページ途中にあるグローバルナビなどをスクロール時にトップに固定する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
コメント