HTMLで固定ヘッダーを作るならこれ！3つの簡単な方法を詳しく紹介

<header id="header">
	<div class="header-container">
		<div class="logo">
			<img src="https://web-create-kokusyo.com/wp-content/uploads/2024/11/25127059-4.png" alt="サイトロゴ">
		</div>
		<nav>
			<a href="#service">サービス</a>
			<a href="#faq">FAQ</a>
			<a href="#about">会社概要</a>
			<a href="#contact">お問い合わせ</a>
			<a href="#blog">ブログ</a>
		</nav>
	</div>
</header>

/* ヘッダーのスタイル */
header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: #222;
	color: #fff;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	z-index: 1000;
	transform: translateY(-100%);
	transition: transform 0.3s ease;
}

/* 中央寄せのラッパー */
.header-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	height: 70px;
}

/* ロゴのスタイル */
.logo,
.logo img {
	height: 100%;
}

/* ナビゲーションメニュー */
nav {
	display: flex;
	gap: 20px;
}

nav a {
	color: #fff;
	text-decoration: none;
	font-size: 1em;
	transition: color 0.3s ease;
}

nav a:hover {
	color: #ff6347;
}

/* ヘッダーのスタイル */
header {

～　省略　～

	/* 初期状態では画面枠外に隠す */
	top: 0;
	left: 0;
	width: 100%;
	transform: translateY(-100%);
	transition: transform 0.3s ease;
}

/* 「show」クラスを付与すると画面に表示される */
header.show {
	transform: translateY(0);
}

const header = document.getElementById('header');

window.addEventListener('scroll', () => {
    // 100ピクセル以上スクロールされた場合に「show」クラスを付与
	if (window.scrollY > 100) {
	header.classList.add('show');
	} else {
	header.classList.remove('show');
	}
});

window.addEventListener('scroll', () => {
    // 100ピクセル以上スクロールされた場合に「show」クラスを付与
	if (window.scrollY > 100) {
	header.classList.add('show');
	} else {
	header.classList.remove('show');
	}
});

/* ヘッダーのスタイル */
header {
	～　省略　～
	background-color: #222;
	transition: background-color 0.3s ease;
}

header.scroll {
	background-color: #a8a6a6;
}

.header-container {
	～　省略　～
	height: 70px;
	transition: height 0.3s ease;
}

header.scroll .header-container {
	height: 60px;
}

const header = document.getElementById('header');

window.addEventListener('scroll', () => {
	if (window.scrollY > 100) {
	header.classList.add('scroll');
	} else {
	header.classList.remove('scroll');
	}
});

transition: background-color 0.3s ease;