最初に

「position: sticky」 は、CSSで要素をスクロールに合わせて固定するために使用されるプロパティです。これは、閲覧しているブラウザでスクロールをした際に、特定の位置に達したときに画面上に「貼り付けられる」ような効果になります。具体的な使い方とポイントについて説明します。

「position: sticky;」 の具体的な使い方

基本的な記述

.block__sticky {
    position: sticky;
    top: 10px; /* 上端から10pxの位置で固定 */
}

スクロールをした際に固定させたい要素に上記のプロパティを追加します。また、固定する位置を相対的に指定できるので、基準（通常は top、right、bottom、left など）とpxを指定すれば、その位置に固定されます。

「position: sticky;」の活用例

See the Pen position: sticky; の使い方 by perenote (@perenote) on CodePen.

こちらのサンプルはかなりシンプルな構成ですが、要点は、、

• 「position:sticky」 が機能するのは、要素が含まれる親要素がスクロールする範囲内。親要素がスクロールしない場合、効果が発揮されないことがある。
• 要素が固定される位置は親要素の範囲内に制限される。親要素の範囲を超えて固定されることはないので注意。
• ナビゲーションバーやセクション見出し、最近ではページの目次など、スクロール時にユーザーの視界に留めておきたい要素に使用するのが有効。

※注意点

便利なcssですが、特定の場合に「position:sticky」が意図していない動きになったり、そもそも動かないといった事があります。その時は以下の点を見直してみてください。

親要素の高さに依存する

要素がスクロールに対して正しく動作するためには、親要素がスクロール可能な高さを持っている必要があります。親要素が要素の高さ以上に小さい場合、スクロールする前にすでに要素が画面内に固定されるため、sticky の効果が発揮されません。

親要素のオーバーフロー

親要素に overflow: hidden; が設定されていると、sticky が期待どおりに動作しない場合があります。これは、オーバーフローが隠されることで要素のスクロールが遮断されるためです。特に overflow: auto; や overflow: scroll; といったスクロール可能な設定が必要です。

インライン要素では使用できない

position: sticky はブロックレベルの要素やフレックスボックス内の要素で使用するのが一般的です。インライン要素（例えば、<span>など）に直接適用することはできません。もしインライン要素を固定したい場合は、その要素をブロックレベルに変更する必要があります。

最後に

スクロールして固定させたい要素で特にヘッダーや特定のコンバージョンにつながるボタン（お問い合わせや採用フォームなど）での活用は必須に近くなっている印象です。
また、使い方次第でスクロールに応じてコンテンツが切り替わるなどのちょっとリッチに見せるコンテンツに利用する事も可能です。

個人的な所感ですが、最初は少しとっつきにくく感じるプロパティでしたが慣れると活用する機会や幅広い表現ができるので重宝しています。