position : stickyをうまくつかって、要素が上下に接するように制御します。
動作イメージ
Demo
See the Pen stick-headers by kyogom (@kyogom) on CodePen.light
position : stickyでトリッキーなところ
stickyな要素が複数ある場合に、それぞれの共通の親要素がブロック要素か、インライン要素かで挙動が異なる。
下記のDemoで50行目の display: inline;を削除して右下の「Rerun」をクリックするとわかるが、親がインライン要素だと、上の要素が押し出される動きをする。