位置や高さの指定など、CSSの仕様を踏まえておく。

ただし単にサイドバーに「position: sticky;」だけを指定しても、何も変わらない。

CSSの仕様上、「position: sticky;」を使用する時は、、、

1. 「position: sticky;」と一緒に、位置を決める「top、 right、 bottom、 left」のいずれかが指定されているか？
2. 「position: sticky;」と一緒に、高さ「height」が指定されているか？
3. 「position: sticky;」を指定した要素の親要素の「overflow」が初期値の「visible」となっているか？ （※逆に、hidden、 scroll、 auto、 overlay」のいずれかが指定されていないか？）

が、必要となる。

最低限、このセットで「sticky」は機能する。

もしうまく効かないときは、この３つをチェックすると良い。

mainタグとasideタグで２カラムにする場合。

例えば一般的なブログのような２カラムにする場合は、以下の通りで実装できる。そしてサイドバーになるasideを「sticky」にする。

HTML

例）

<div>
 <main>メインコンテンツなど</main>
 <aside>サイドバーなど</aside>
</div>

CSS

例）

div {
 display: flex;
 overflow: visible; /* 初期値なので省略可。hiddenなどが指定されていないように注意。 */
}
main {
 width: 70%;
}
aside {
 position: sticky;
 top: 50px;
 width: 30%;
 height: 100%;
}

効かないときは、もう一度ここをチェック。

今回の例では、mainとasideをdivで囲み、「display: flex」を指定している。これで子要素のmainとasideがFlexアイテムとなり、自動的に２カラムになる。

上記の繰り返しとなるが、チェックする項目としては、、、

MDN： position – CSS: カスケーディングスタイルシート | MDN

※2023.01.21追記）

ChatGPTに聞いてみた場合。

「CSSのposition: stickyの使い方を教えてください。」

英語で返答が来たので、Google翻訳で日本語に。

現実的にはこれでは実装できない。というよりもこれでは効かないため、失敗してしまうことが多いのだ。

動作させるにはコードが足りないので、これを盲信すると確実に、stickyは効かない。
なので次の質問をしてみた。

「CSSのposition: stickyが効きません。どうすれば良いですか？」

また英語で返答が来たので、Google翻訳で日本語に。

おおむね正しい感じだが、文章が長く、くどく、ちょっと読みにくい。

z-indexに触れているが、z-indexは必須ではない。設定しなくても「position: sticky;」は実装できる。

また、ブラウザのサポートについての言及があるが、IEのサポート終了により現在のモダンブラウザ（Safari、Chrome、Firefox、Edge、Operaなど）では問題なく使用できる。

このChatGPTの説明の正確性は？ Can I Useによるチェック。

Can I Useによる、ブラウザ実装状況のチェックを改めてしてみた。

2023年時点使われているブラウザ、いわゆるモダンブラウザでの実装状況は問題なく、気兼ねなく使える。

参照：“position: sticky” | Can I use… Support tables for HTML5, CSS3, etc

以上、参考になれば幸いです。