jQuery>レスポンシブなスティッキーヘッダーを作るチュートリアル

レスポンシブなスティッキーヘッダーを作るチュートリアル

2018年6月18日

スティッキーヘッダーとはページをスクロールしても上部に固定されている、ヘッダーメニューのことです。

ヘッダー部分を固定させるだけなら簡単にできますし、Bootstrapを使ってしまえば、レスポンシブで便利なヘッダーもサクッと用意できてしまいます。

しかし、今回は0から作っていきます。

 

なぜ0から作るかというと、オシャレなスティッキーヘッダーが作りたいからです(笑)

 

というわけでレスポンシブでオシャレなスティッキーヘッダーを作っています。

 

 

 

jQueryのバージョン3を使って作っていきます。
jQuery自体は簡単なコードなので楽に作れると思います。

 

今回のソースコード(GitHub)

デモ

 

ページを作り込む

まずはページを作り込んでいきます。

今回用意するのはindex.htmlとstyle.cssです。
jQueryのコードはindex.htmlに直接書いていきます

 

index.html

 

style.css

ここまでの結果がこんな感じです

 

ロゴは画像とかにしても面白いのですが、今回はテキストにしています。
フォントはちょっとゴーストちっくな感じです。

フォントはGoogleFontsからインポートできます。

 

ここの3本線のアイコンは画面幅が小さい時だけ表示させたいです。
Homeなどのメニューは、画面幅が広い時はそのまま表示させて、小さい時は非表示にしたいです。

これはmediaqueryで表現できます。

レスポンシブデザインでは、media queryが大きな力を発揮します。
Bootstrapを使っているとそこまで意識しないのですが、内部的にもこれが働いています。

 

まずはcssでスタイルを揃えていきます

 

 

style.css

実はこれだけでなかなかしっかりとしたヘッダーメニューではあります

 

 

画面幅を変えても、それなりに対応できています。

 

スティッキーヘッダーを完成させる

これだけでもメニューは固定されているのですが、オシャレで動きのあるスティッキーヘッダーを完成させて、その後にレスポンシブ対応していきます。

まずはjQueryのコードを書いていきます。
下方向にスクロールした時に動きのあるスティッキーヘッダーを動作させます

 

index.htmlのbodyタグの上に記載しています

 

 

ここで、if($(window).scrollTop())というものがあります。
これはスクロール位置によって値が変化します。

スクロール位置が一番上にある時に0が返却され、下にいくほど大きな数値になっていくのですが、なぜこれでif文が成立するのでしょうか?

答えはjavascriptでは数値の0はfalseになるという仕様になっています。

そのためスクロール位置が一番上でない場合は、navにstickyがつきます。

 

 

 

検証機能を使うとしっかりクラスがついていることがわかります。

 

 

スクロールすると背景が黒くなるヘッダーメニューが完成しました

 

 

レスポンシブ対応させる

次にレスポンシブ対応していきます。

 

画面幅が小さくなったら
3本線のアイコンを表示させて、メニューの部分を非表示にさせる

そしてアイコンをクリックした時にメニューを表示させるようにします

 

まずはjQueryを完成させます

これだけです

 

 

ではcssを完成させます

 

画面幅が小さい時のスタイルを設定するだけでいいです

media queryを使えば簡単にレスポンシブ対応させることができます

ya

 

 

これでレスポンシブなスティッキーヘッダーが完成です!