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】ブラウザのタブが非アクティブ時でもsetIntervalの挙動について!

丁度、jQueryで自動的にスライドさせて画像が切り替わり、ボタンをクリックする …

【JavaScript】複数の画像の読み込みが完了した時のイベントを感知するには??

複数のイメージ画像を読みが完了した時のイベントを感知するにはどうしたらいいのだろ …

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

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

jQuery 1.7の on()で要素を削除して追加後もイベントを永続的に引き継ぐ

先日、とある案件である要素にclickイベントを設定していたのですが、削除する必 …

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

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

【JavaScript】子ウィンドウ/親ウィンドウのお互いの要素を操作するには!?

以前、iframe内から親ウィンドウの要素を操作する記事を書きました。 ifra …

javascriptオブジェクトをJSONオブジェクトに返還

WebStorageで複数のデータを保存するときに、知ったのでメモる。 JSON …

【jQuery】ajaxで読み込み中にローディングの実装するにはどうしたらいいのか調べてみた

ajaxでリクエスト処理中のローディングについて調べてみた。

html5でドラッグ&ドロップの処理

ドラッグ&ドロップって昔から使われてたらしいけど、とりあえず知っておこうと思って …

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

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