サイトの動線の要であるグローバルナビ。

 

グローバルナビを最初からページ上部に固定する場合には、単純にスタイルシートで「position: fixed;」を指定するだけで実現できます。

 

しかし、ヘッダーが大きい場合やスライドショー下にナビゲーションが来るデザインの時は、最初から固定しておくのではなく、スクロールの途中でページ上部に固定・解除を切り替えたいですよね。

 

そんな時は、jQueryを使うと実現できます。

 

ここでは、jQueryを使ったスクロールナビの固定・解除の方法を紹介していきます。

 

スクロール途中で固定・解除を実現するための原理

原理、というと難しい響きですが、その内容はとてもシンプルで簡単です。

 

javascriptでは、スクロールイベントが起きた時に走る関数である「.scroll()」があります。
そのイベントが起きた時に、現在のスクロール量とスクロール固定を始める位置を条件文で判定すれば良いのです。

 

現在のスクロール量は、「scrollTop()」関数で取得することができます。

 

指定位置までスクロールが来ている場合には「addClass()」関数で固定用クラスをナビゲーションに追加し、そうでない時は「removeClass()」で外します。

 

これによって指定位置での固定、解除の切り替えが実現できます。

 

指定ピクセル位置でfixed関数の付け外しを実現するスクリプト

 

サンプルプログラム

以下は、実際にスクロール途中でグローバルナビゲーションの固定・解除を切り替えるためのサンプルプログラムです。

 

以下の場合、ブラウザのスクロール量が「area1」というIDが付与されたブロックを超えた時にbody要素に固定用クラス「header_fix」を付与し、そうでない時は外しています。

 

ナビゲーションそのものにクラスを付与しても良いのですが、body要素にクラスを付与した方が、複数の要素に対してスタイルシートを適用できるため、デザインを整える際に勝手が良いです。

 

javascript

 

CSS

 

 

おすすめの記事