Sticky Header DEMO

このページではCSSの【position:sticky;】を使って
スクロールの途中から要素を画面に固定させる方法を
実装しているデモサイトです。

sticky 1

1

ここからsticky 1が上部に固定されます。
スクロール位置がこのブロックの最下部になると固定が解除されます。

sticky 2

2

ここからsticky 2が上部に固定されます。
スクロール位置がこのブロックの最下部になると固定が解除されます。

sticky 3

3

ここからsticky 3が上部に固定されます。
スクロール位置がこのブロックの最下部になると固定が解除されます。

sticky 4

4

ここからsticky 4が上部に固定されます。
スクロール位置がこのブロックの最下部になると固定が解除されます。

sticky 5

5

ここからsticky 5が上部に固定されます。
スクロール位置がこのブロックの最下部になると固定が解除されます。

このようにスクロール位置にかかったタイミングで要素を固定できます。
JavaScriptでscrollイベントを使ってスクロール位置を計算してfixedの付け替えなどでも対応できますが、その処理をCSSに任せることで少し軽く実装できそうです。IEでもpolyfillを使うことで対応できます。