KYO

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

2018年6月18日 jQuery ,

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

ヘッダー部分を固定させるだけなら簡単にできますし、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

 

 

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


関連記事

jquery.inviewに変更したら見やすいサイトの動きになった

2018年6月15日

追記:現在のテーマでは使用していません。 現在はKYOというテーマを使っています   たまに、ふわっと表示されるかっこいい動きのあるサイトがあります。 そういうサイトを見ると、真似したくなりますよね? でも、難しそうと思うかもしれませんがプラグインを使ってしまえば簡単です!       jquery...

記事やコンテンツが流れていくスライダーのアレを作ってみた

2018年7月28日

ブログとか見ているとトップページに、オススメの記事などが流れているスライダーを見かけます。今回はそれを作りました。画像スライダーというかコンテンツスライダーと呼ぶのでしょうか?とにかくあれです。自作すると大変そうなので、bxsliderというjQueryのプラグインを使いました。 コンテンツスライダーを作る まずは作ったデモサイトをご覧く...

JQuery Ajaxを使うときにハマったこと

2018年6月15日

JQuery Ajaxを使ってみたのでそのメモ。 Jsonデータからリアルタイムに検索して結果を出力するものです。   YouTubeの動画を参考にしました     いざこれを実際に作ると環境によっては動作しません。     ローカル環境からはAjaxは使えないようです。   な...

jQueryで超クールなタスク管理アプリを作る

2018年6月16日

このチュートリアルのクオリティが高いので共有します! 微妙にカスタマイズしつつ作りました デモ     これくらいのアプリがサクサクと作れたら気持ちいいですね。     機能としては 新規タスクの追加 タスクの編集 タスクの削除 タスクの完了 これら全てjQueryで行なっていきます。  ...

オーバーレイをかけたスライドメニューを作った[簡単]

2018年7月28日

レスポンシブデザインを意識すると、ボタンを押したら横からメニューが出てくるスライドメニューを考えたりします。 メニューが表示されている時は、オーバーレイをかけて画面全体を暗くして、メニュー以外のどこかをクリックしたらメニューを閉じる。みたいな感じのを作ります。 スライドメニューを作る 前回記事やコンテンツが流れていくスライダーのアレを作っ...

jQueryでフォームのバリデーション機能を実装する

2018年6月10日

最近は、phpとjQueryをメインに勉強しています。 今回はjQueryを使って簡単なバリデーション機能を持った、フォームを作成します。   ソースコードはgithub   完成するとこんな感じです       バリデーションフォームの概要 phpでバリデーション処理を書くと送信ボタンを...