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

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

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

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

実装方法

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

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

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

うまく動作しない場合

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

position: sticky;がうまく動作しない時に確認することと対処法

ヘッダーやサイドナビをスクロールに合わせて固定できる「position: sticky;」。とても便利ですがうまく動作しないケースがあります。動作しない場合はここを確認しましょう。

www.ameamelog.com

2019.07.23

まとめ

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