position: sticky の DEMO

スクロールして動作を確認してください！

以前は JavaScript を使っていたけど、CSS だけでできるようになった。

下にスクロールすると、ヘッダーとサイドバーが固定されるのを確認できます。

さらにスクロールすると、

サイドバーの親要素の高さを超えると、固定が解除されます。