最近、ウェブサイトを作る際、IEを非対応にして良いというケースが増えてきたため、ついに position: sticky を使い始めました。
position: sitickyとは
要素は文書の通常のフローに従って配置され、直近のスクロールする祖先および包含ブロック (直近のブロックレベル祖先、表関連要素を含む) に対して top, right, bottom, left の値に基づいて相対配置されます。オフセットは他の要素の配置には影響を与えません。
position - CSS: カスケーディングスタイルシート | MDN より引用
ざっくり言うと、親がwindowではないposition: fixedのようなものだと思っています。
親要素が画面上にあれば、fixedのような挙動（フロートしないので厳密には違いますが）をし、親が画面上から消える際には一緒に消えていく感じです。
百聞は一見にしかずなので、DEMOを見てもらうのが早いと思います。
DEMO
👆にposition: sitickyを当てているのですが、親がスクロールしきるまでは、画面上に止まるのがわかるかと思います。
position: sitickyを使う場合の注意点
なお粘着要素は、直近の祖先がスクロールしない場合でも、「スクロールの仕組み」を持つ直近の祖先 (overflow が hidden, scroll, auto, overlay として作成されたもの) に「粘着」します。これによって「粘着」のふるまいを効果的に抑止します (GitHub issue on W3C CSSWG を参照)。
position - CSS: カスケーディングスタイルシート | MDN より引用
ざっくり言うと、祖先にoverflow: hidden, scroll, auto, overlayの要素があると効きません。注意が必要です。
