Web制作実務役立ち

スクロールするとアニメーション付きで追従ヘッダーを出すコードと解説【HTML,CSS,JavaScript】

スクロールでアニメーション付きで追従ヘッダーにする方法【HTML,CSS,JavaScript】
本ページにはプロモーションが含まれています。

こんにちは、しょーご(@samuraibrass)です。

ヘッダーは基本的にページ横断で同様のものが使われるので、Webサイトやシステムの中でも最重要くらいのコンポーネントだと思います。

よって、仕様によっては実装が簡単に困難になります。

今回実装する「最初普通にヘッダーを表示していて、スクロールするとにゅっと出現して追従するようになるヘッダー」も、めちゃくちゃ言語化しにくい上に、意外に詰まったりしますよね。

See the Pen normal_header-to-sticky _header by samuraibrass (@samuraibrass) on CodePen.

今回はこれを解説していきます。

しょーご

この記事を書いたのは
しょーご@samurabrass

このブログ「しょーごログ」の運営者。2018年からエンジニアとしてサイト制作やシステム開発を行いつつ、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う。

コードと挙動はこちら

See the Pen normal_header-to-sticky _header by samuraibrass (@samuraibrass) on CodePen.

コードの解説

CSS

まずはCSSを見てみます。

.header--sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  opacity: 1;
  visibility: visible;
  animation: slideDown 0.3s ease-in-out;
}

@keyframes slideDown {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0%);
  }
}

header–stickyを付けたり外したりして追従ヘッダーにする、そういう役割です。

また、animationを指定しています。

実際のアニメーションは@keyframesで指定します。

初期状態では上に隠しておき、0.3秒で下に出すわけですね。

JavaScript

ここでは「100pxスクロールしたら、header–stickyを付与」しています。

同時に、元々のヘッダーがそのまま消えると、ヘッダー分その下のコンテンツがガクッと動いてしまうので、

bodyにmargin-topをつけてヘッダー以下のコンテンツが動かないようにしています。

100px以内に入ったら、逆のこと(removeや初期化)をしてあげればいいです。

window.addEventListener('scroll', function() {
  const header = document.querySelector('.header');
  const headerHeight = header.offsetHeight; // ヘッダーの高さを取得
  const scrollY = window.pageYOffset;
  
  if (scrollY >= 100) {
    header.classList.add('header--sticky');
    document.body.style.marginTop = headerHeight + 'px'; // コンテンツにヘッダーの高さ分の余白を設定
  } else {
    header.classList.remove('header--sticky');
    document.body.style.marginTop = '0'; // コンテンツの余白をリセット
  }
});

書いてみるとなんでもない処理ですが、一から実装すると意外にめんどくさいですね。

改良の余地

今だと上にスクロールするといきなりヘッダーが消えるんですが、もっと親切にやるなら、出現したときのアニメーションみたいに「上ににゅっと隠れる」アニメーションがかけられるとなお良いかなと思いますね(他人任せ)

即戦力になれるコーディング課題

HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】
  1. Figma,Photoshopデザインからのコーディング
  2. サーバーアップロードでサイト公開
  3. プロによる最大3回の表示確認特典
  4. レビュー返しは爆速
  5. 2024年にデザイン刷新!被らないポートフォリオ

初級編」は初めてデザインからコーディングする方向け
中級編」はJavaScriptやjQueryの練習
上級編」はWordPressの実案件を模擬体験できるレベル感にしています。

中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。

全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。

また、2024年には随時デザインの刷新をしており、完全リニューアル!!

他者と差をつけられるポートフォリオが準備できます!

コーディング課題 中級 中級Ex
しょーご

制作会社も使用する専用レビューツールで分かりやすく添削していきます!

基本的に「まとめて購入」していただくとかなりお得になります↓

コーディング課題
まとめて購入

全部盛りこちらから
中級以上こちらから
即戦力編こちらから

コーディングは書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください!!

\課題の購入はこちらから/

また、超実践編という鬼のようなコースもあるので、ほぼ実案件と同じ厳しい環境でコミュニケーション面までレビュー受けたい方がいれば、是非。

超実践編バナー

超実践編をとりあえず見てみる

投げ銭機能を設置しました!

寄付とメッセージには全て目を通させていただきます!

🍺 ビールをプレゼントする

あなたに是非読んでほしい記事です!