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

position: sticky;とは、要素をスクロールに合わせて固定配置できるCSSです。
実装方法に関しては以下の記事でご紹介しています。

記事の通りに実装しても、うまく動作しない場合があります。
その場合、マークアップの仕方が関係していることが多いので、その対処法をご紹介します。

この記事の目次

overflow: hidden;をかけていないか

<html>や<body>に「overflow: hidden;」を記述していると、うまく動作しません。

これが一番多い原因だと思います。
<html>や<body>にとりあえず「overflow: hidden;」をかけていると、動作しない仕様になっています。

「overflow: hidden;」を指定していたら、解除することできちんと動作するはずです。
外すとサイトが崩れてしまう場合は、根本のマークアップから見直す必要があるかもしれません。

メインカラムとサイドカラムの2カラム構成になっている場合、両カラムの高さが同じでないと動きません。

高さを揃えるにはいくつか方法があります。
どれを使っても問題ないので、好みや使いやすい方法を選んでください。

HTMLは共通のものを使用します。

<div class="contents">
	<main>メインカラム</main>
	<aside>サイドカラム</aside>
</div>

display: flex;を使って要素を横並びにすると、自動で高さも揃います。
このやり方が一番シンプルに記述できるので、個人的にはおすすめです。

.contents {
	display: flex;
}
main {
	flex-basis: 60%;
}
aside {
	flex-basis: 30%;

※「flex-basis」は、「display: flex;」の子要素に幅を指定する際に使うプロパティです。
値は適当に指定しているので、サイトによって変更してください。

「display: flex;」を使用するにはベンダープレフィックスが必要になります。
2019年9月時点での必要なベンダープレフィックスは下記をご覧ください。

「display: table;」で横並びにすると、高さが自動で揃います。
「vertical-align」の指定もできるようになるので、使い勝手はとても良いです。

.contents {
	display: table;
}
main,
aside {
	display: table-cell;
}
main {
	width: 60%;
}
aside {
	width: 30%;

3つ目はjQueryを使ったやり方です。
既にHTMLが組んであって、構成をあまり変えたくない方はこちらが良いかもしれません。

「jquery.matchHeight.js」というライブラリがとてもシンプルで使いやすいです。
以下のサイトでとてもわかりやすくご紹介してくださってます。

経験上、この2点が原因であるケースがほとんどです。
正しく記述してもうまく動作しなかったら、この2点を確認するようにしましょう。