サイトの動線の要であるグローバルナビ。
グローバルナビを最初からページ上部に固定する場合には、単純にスタイルシートで「position: fixed;」を指定するだけで実現できます。
しかし、ヘッダーが大きい場合やスライドショー下にナビゲーションが来るデザインの時は、最初から固定しておくのではなく、スクロールの途中でページ上部に固定・解除を切り替えたいですよね。
そんな時は、jQueryを使うと実現できます。
ここでは、jQueryを使ったスクロールナビの固定・解除の方法を紹介していきます。
スクロール途中で固定・解除を実現するための原理
原理、というと難しい響きですが、その内容はとてもシンプルで簡単です。
javascriptでは、スクロールイベントが起きた時に走る関数である「.scroll()」があります。
そのイベントが起きた時に、現在のスクロール量とスクロール固定を始める位置を条件文で判定すれば良いのです。
現在のスクロール量は、「scrollTop()」関数で取得することができます。
指定位置までスクロールが来ている場合には「addClass()」関数で固定用クラスをナビゲーションに追加し、そうでない時は「removeClass()」で外します。
これによって指定位置での固定、解除の切り替えが実現できます。
指定ピクセル位置でfixed関数の付け外しを実現するスクリプト
サンプルプログラム
以下は、実際にスクロール途中でグローバルナビゲーションの固定・解除を切り替えるためのサンプルプログラムです。
以下の場合、ブラウザのスクロール量が「area1」というIDが付与されたブロックを超えた時にbody要素に固定用クラス「header_fix」を付与し、そうでない時は外しています。
ナビゲーションそのものにクラスを付与しても良いのですが、body要素にクラスを付与した方が、複数の要素に対してスタイルシートを適用できるため、デザインを整える際に勝手が良いです。
javascript
CSS
