Web.fla

主食は、html/css/php/javascript(jQuery) デザートはactionscript!WEBに関することをメモってくサイト

*

【jQuery】スクロールしてヘッダーやナビを上部に固定するには?

   

スマホサイトのリニューアルでスクロールしたらヘッダーが上部に固定させるようにしたいとの事で久々にjQueryを触ったのでせっかくなのでメモします。
サンプルを作りましたのでスクロールしてみてください。

サンプルを見ると背景が黄色になっている部分がスクロールすると固定されます。ここ最近のスマホのサイトではよくロゴ+ナビゲーションがあってスクロールするとナビゲーションだけヘッダー上部に固定されるサイトを見るのでそれを説明していこうかと思います。

必要なhtmlのソース

まずはhtmlのソースを準備します。

headerタグで括ってるのがヘッダーでarticleで括ってるのがメインコンテンツです。ヘッダーの最初のpタグは固定させないで、そのままスクロールさせます。
これはスマホサイトなどでロゴ+ナビの順番でナビだけ固定させたりするサイトもよく見受けられたのと、
一番上に固定させたい要素があった場合はわざわざスクロールした場合に固定させる必要がなく最初からCSSで固定させれば済むからです。

CSSで設定する

今度はCSSの設定です。細かいCSSの設定は見た目を整えているだけなので省きます。

まずは固定させる要素のCSSですが、判り易く背景を黄色にしています。高さを設定していますがしなくてもいいです。この固定させる要素の高さが後々ポイントになってきます。(後術)

固定させるためのCSSの説明としては、「position:fixed」で「top:0」にして上部に固定させて「z-index」で他の要素より上にレイヤーに表示させるようにしています。

jQueryで実装する

いよいよ実装に入ります。ちょっと段階を区切って説明していきます。

必要な情報を変数に保存する

まずは必要な要素を取得して変数に入れておきます。まぁ特に変数に入れなくもいいんですけどね(笑)

ただ注意点として要素の高さを取得する場合はloadイベントで取得しないと高さが正常に取得できない事もあるので注意したほうがいいでしょう。これは読込の順番によるものです。詳しくは下記のサイトを参考にしてみてください。

上記の「fixed_class」「$fixes_area」「$main」は単純に要素を入れているだけです。
そして「fixes_pos」と「fixes_h」は今回のポイントとなる変数です。

スクロールイベントでスクロール量をしらべて条件判定をする

jQueryにスクロールした場合の「scroll」イベントがあるので、スクロールしたらイベントが発火するようにします。そして下記の様な処理をします。

  • 1:window全体のスクロール量を調べて変数「value」に保存する
  • 2:スクロール量が固定させる要素のポジションを越えたかif文で条件分岐する
  • 3:スクロール量を超えた場合は、addClassで固定するクラスを設定する

と上記のようにすればヘッダーは固定できます。

固定した要素の高さを下の要素に設定する

さて、固定させるのは割と簡単にできます。これでもいいのですが、実際これでスクロールするとひとつ気になる事がでてくると思います。
それは、要素を固定させると、その前後の要素との間にすっぽりと隙間ができて高さが無くなるので、下の要素(今回で言えばメインコンテンツの要素)が突然、上にガクッと動いて詰まるような動きをします。

それを防ぐために、すぐ下にある要素に隙間が出来た分の高さ=固定させた要素の高さを「margin-top」で設定してあげることでガクッと詰まるような動きをしないでスムーズになります。

以上で、スクロールしてヘッダーやナビを上部に固定させる説明は終わりです。割とさくっと実装できます。

 - javascript, jquery ,

     

Message

  関連記事

【jQuery】配列から最大値を求めて、div要素の高さを揃える

よく対象のdiv要素のCSSで「padding-bottom:1000px; m …

no image
jQuery 簡易画像ビュアー

今回は画像ビュアーを作成してみました。相変わらず簡易ですけど。 目次1 クリック …

【jQuery】スライドコンテンツをjQueryのプラグインで作ってみた!!

以前、作成したjQueryの簡易画像ビュアーのコンテンツバージョンを作成しました …

【javascript】剰余(%)演算子を使って値が繰り返しループする処理をやってみた!

ちょっとプログラムで、配列の長さの値の範囲内で繰り返す値をどうすればいいのか検証 …

no image
フォームにアクセスする

いまさらながらフォームにアクセスする方法をメモ ざっくりとメモ。 ■配列でフォー …

no image
jQuery で時間差でアニメーション

よくFlashでTween系のアニメーションでdelay効果で時間差で表示させる …

CSS3のアニメーションをjavascriptで実行する方法

よくCSS3でロールオーバーでアニメーションさせるのありますが、まぁそれは、普通 …

【JavaScript】bodyに要素を追加

そういえばbody要素直下にデータを追加したい場合っていまさらながらメモる。 i …

no image
要素を追加する 

最近やたらとjQueryに頼って生きてます。jQueryだと要素の追加が簡単だが …

【JavaScript】送信ボタンのイベントをキャンセルさせる方法とは!?

フォームのsubmitボタンでクリックすると情報が送信されますが、その前に入力し …