headerタグの position を sticky に、top を 0 に設定する。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>【CSS】ヘッダーをページ上部に固定する</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>さんぷるさいと</h1>
</header>
<p>い<br>あ<br>い<br>あ<br>い<br>あ<br>い<br>あ<br>い<br>あ<br>
い<br>あ<br>い<br>あ<br>い<br>あ<br>い<br>あ<br>い<br>あ<br>
い<br>あ<br>い<br>あ<br>い<br>あ<br>い<br>あ<br>い<br>あ<br>
い<br>あ<br>い<br>あ<br>い<br>あ<br>い<br>あ<br>い<br>あ<br>
い<br>あ<br>い<br>あ<br>い<br>あ
</body>
</html>
style.css
@charset "utf-8";
header {
background: teal;
position: -webkit-sticky;
position: sticky;
top: 0;
}
今回の場合、ヘッダーの背景色は鴨の羽色となり、スクロールするとヘッダーがページ上部に固定して表示される。
