🐗

CSS:JavaScriptなしで固定ヘッダーを作成するposition:sticky

2023/08/31に公開

コーディングするにあたって、なるべくJavaScriptは使用せずCSSだけで済ましたい。だってJSは大体何でもできるけど、バグとか考慮するとCSSの方がテストも少なく実装できてうれしいんだもの…。ということでcssで実装できることの一つ、スティッキーヘッダー、固定ヘッダーを作成していきます。

コード

<body class="stickywrap">
	<header class="stickyheader">
		<nav class="stickynav">
			<a class="navlink" href="#">1</a>
			<a class="navlink" href="#">2</a>
			<a class="navlink" href="#">3</a>
		</nav>		
	</header>	
	<main>...</main>
	<footer>...</footer>
</body>

.stickyheader{
  position: sticky;
  top: 0px;//ほかに固定要素があるなら下も調整してかぶらないように
  z-index:2;//ここも他要素による
}

このようになります。注意事項としては
・topを指定すること（しないと固定されない）
・z-indexを指定すること（固定されてない！と思ったときは別の要素に回り込んでいる可能性大）
・親要素の高さが0、親要素がbodyではないなど（これも気づきにくかったりする）
ということですね。topを指定しなかった場合はそもそもの初期位置に居続けるようです。またリッチページではアニメーションが複雑に重なって固定ヘッダーが見えなくなってしまう場合があるので要注意。

以上です。ご覧いただきありがとうございます。

コード

Discussion