LAMPインフルエンサーマーケティングマネジメントマーケティング人事戦略ビジネススキル採用情報メディア掲載情報ニュースリリースイベント情報Web制作スクロールしてもついてくるスティッキーヘッダーをJSで実装する方法2014.06.26スクロールしてもついてくるスティッキーヘッダーをJSで実装する方法はやち2014.06.26Web制作シェアどうもです。フロントエンドエンジニアのはやちです。̆)☝そんなのどうでもいいですね。今回は縦に長いコンテンツなどでよく見かけるスティッキヘッダーを作ってみました。̆)☝スティッキーヘッダーとは?スクロールしてもヘッダーがついてくる技法のことです。ページ移動がしやすいため使用されることが多いです。縦に長いLPのページ内リンクで使用されることもあります。̆)☝はじめは#chenge部分を消してスクロールのてっぺんが、#contentのてっぺんがくっついた時に#chengeが表示するしくみをつくります。JSを組んでみよう仕組みがわかったところでJSを組んでみましょう。//#change部分が上がる。$chenge.slideUp();//#change部分が降りてくる。̆)☞三☞シュッシュッDEMOまとめいかがでしたでしょうか。今回.slideDown();で上から降りてくる動きにしましたが、.fadeIn();に変えればふわっとしたアニメーションのスティッキーヘッダーを作ることができます!また、ここではご紹介できませんでしたが、.animete();でスクロールさせる位置ごとに色を変化させるなど、仕組みがわかってくると色々試すことができます。POSTLIGへの自由なメッセージお待ちしています頂いたご意見への回答は行っておりません。