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

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

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

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

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

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

ではやってみましょう!

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

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

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

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

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

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

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

どんな風に動くの?

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

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

では(^^)v