2019.03.19スポンサーリンク「スティッキーヘッダーにしてみたけど大きすぎて結構邪魔だな...途中でコンパクトに変わるようにしたいな」そんな人のために今回はjQueryを使った、スクロールするとヘッダーのデザインが変わってコンパクトになるスティッキーヘッダーを作り方を紹介します。今回は通常のヘッダーがスクロールによって画面外に出たらコンパクトなスティッキーヘッダーを上からスッと出すようにします。最初に言っておくと、めちゃめちゃ簡単に作れます。jQueryとCSSをいじるだけです。考え方コードの解説コード急ぎの方のためにコードだけ最初に載せておきます。コピペして使ってください。途中でヘッダーのデザインを変える場合は、「通常時のヘッダー」と「スティッキーヘッダー」の2つを用意しておくことになります。HTMLとCSSで両方ともコーディングをしておきましょう。考え方としては通常のヘッダーがスクロールによって画面外に出たらスティッキーヘッダーとすり替えるようにします。通常のヘッダーの高さ分スクロールしたらスティッキーヘッダーを上から出せばいいと言うことになります。スティッキーヘッダーは最初は見えないようにするので、スティッキーヘッダーの高さ分topをマイナスに指定することで画面外に出して見えないようにしておきます。コードの解説HTMLHTMLは特に大丈夫だと思います。通常時のヘッダーとスティッキーヘッダーの2つを用意するだけです。fixedを指定します。topの値はjQueryで操作します。9999;を指定してページの最前に表示します。0.25sを指定します。jQuery変数は上に書いてある通りです。find()メソッドなどで必要な要素を絞り込みましょう。通常時のヘッダーとスティッキーヘッダーの高さを調べるためにouterHeight()メソッドを使います。スティッキーヘッダーを出したり引っ込めたりするのに必要になります。最初にスティッキーヘッダーを画面の上に隠すために、スティッキーヘッダーの高さ分topにマイナスの値を指定します。});スティッキーヘッダーが出てくる条件は画面のスクロール量が通常のヘッダーの高さを上回った時です。0;にして画面の上部に固定されるようにします。}});以上で途中でデザインがコンパクトに変わるスティッキーヘッダーの完成です。あとはロゴだったりグローバルメニューだったりをお好みで入れれば完璧です。スティッキーヘッダーの作り方など、基本的なjQueryの使い方は以下の本で勉強しました。初心者にもわかりやすく解説されているので、これ1冊で基本はバッチリです。RinkerKindleAmazon楽天市場Yahooショッピングまた、CSSだけでもスティッキーヘッダーを作ることはできます。コードもめっちゃ簡単なので、jQueryを使いたくない人は以下の記事を参考にしてみてください。【jQuery不要】CSSだけ!途中から追従するスティッキーヘッダーを簡単に作る方法(サンプル付)スティッキーヘッダーはjQueryで実装するのが定番ですが、知らない間にCSSだけでも簡単に作れるようになっていたみたいなので紹介します。今回はHTMLで作ったテーブルにソート機能を追加するjQueryプラグイン「Tablesorter」の使い方を解説します。Table...jQuery【初心者向け】プラグインなし!クリックで切り替わる基本的なタブの作り方【jQuery】タブは狭い画面に多くの情報を載せることができるので結構重宝します。...jQueryjQueryのanimate()でbackgroundColorが動作しない理由と対策jQueryのanimate()を使ってbackgroundColorやcolorを変更しようとしてもできないという事態が起こると思います。【WordPress】投稿一覧ページのタイトルがめちゃめちゃ狭い時の対処法プロフィールwagashi2000年生まれ。大学を中退し、フリーランスのウェブデザイナーとして活動しています。寿司と桜が大好きだけど同調圧力が苦手。