たった2行!CSSだけでスクロールに合わせてヘッダーを固定する方法 コーディング

【CSS】position:stickyで、スクロールに合わせてヘッダーを固定する方法

タイトルにはヘッダーと書きましたが、ヘッダー以外にも色々なシーンで使えます。

スクロールした時にヘッダーを固定したり、サイドバーを固定したいケースってよくありますよね?
jQueryを使えば簡単に実装できますが、実はCSSだけでもできるんです。しかもたったの2行!

まずはこちらからデモをご覧ください。

スポンサーリンク

実装方法

実装はとても簡単で、下記のCSSを固定したい要素に記述するだけです。

.example {
	position: sticky;
	top: 0; /* ブラウザ上部との間隔を空けたい場合に指定 */
}

「top」の値を変更すれば、ブラウザの上部との間隔を調整できます。
0なら上部にぴったりくっつきます。デモのナビゲーションのようになります。

スポンサーリンク

うまく動作しない場合

下記の記事で対処方法を説明しています。

スポンサーリンク

まとめ

jsやjQueryを必要としないので、この方法ならとても簡単に実装できますね!
動きをつけたいなどこだわりがない場合はこちらの方法で十分対応できます。