Web.fla

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

*

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

      2018/09/17

スマホサイトのリニューアルでスクロールしたらヘッダーが上部に固定させるようにしたいとの事で久々に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】mousemoveでチカチカした

jqueryでmousemoveで追従するツールチップを作成したときに、ツールチ …

【JavaScript】読み込み処理でプログレスバーをアニメーションさせてみた!!

先日、CSSによるローディングバーのぐるぐるしたアニメーションに記事を書きました …

PostMessageを使ったクロスドメイン通信によるメッセージの送受信を試してみた!

JavaScriptでいろいろ実装していると時に別ウィンドウを開いて、呼び出し元 …

【jQuery】親要素を削除する nowrap

wordpressでカスタムメニューを出力するともちろん、すべてのリストメニュー …

【JavaScript】配列をシャッフルして要素をランダムに入れ替える方法

JavaScriptで配列をシャッフルしてその要素をランダムに表示させるにはどう …

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

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

html5のwebStorage(localStorage)でデータを保存する

さて最近、html5が当たり前になってきましたね♪それに伴って新しい機能が追加さ …

【javascript】マウスホイールで減速するイージングを試してみた

マウスホイールで減速するイージングを試してみた ちょっとjavascriptとj …

【jQuery】画像のloadイベントがIE8で動作しない時の解決法

よく画像を読み込む時にローディングの時にプログレスバーを設置する事もあると思いま …

【jQuery】親要素のさらに上の要素を選択したい

とある案件にて、ある要素の親要素のさらに親要素を選択したい時に普通に「paren …