ヘッダーナビ途中固定しつつ、サイドナビも固定しているなかで見出しを固定する方法

Question

少しややこしいのですが、
ヘッダーナビ途中固定しつつ、サイドナビも固定しているそのなかでで見出しを固定するのがうまくできずに苦戦しています。

下記codepenのほうで再現してみたものです。
再現したほうではナビも固定できていませんが、本来なら固定され、そのなかのサイドナビもヘッダー下に固定されるイメージです。
サイドナビは縦スクロールし、そのなかで、見出しのタイトルが固定されます。
今回その固定のやり方が分かりません。

https://codepen.io/nasio7/pen/rEgbyE

やってみた方法
0. cssで再現できたら一番楽かと思いやってみたものの、fixedは画面に対して固定されてしまうので使ませんでした。
0. もう一つはabsoluteでサイドナビ内でタイトルを固定し、コンテンツに対して上マージンを設定するものです。
しかしこれも、absoluteなので縦スクロールすると消えてしまいます。

やはりJavaScriptでやりくりするしか方法はないでしょうか、？
何かアドバイスいただけると助かります。
よろしくお願いします。

参考サイト
3の途中から固定表示を参考にしました。
ヘッダー・ナビゲーションを固定表示させるアイデア5つ

Answer 1

おっしゃってる意味はよくわからないのですが、ナビを固定というのはもしかしたら
position:sticky;のことを言っているのかな、なんて思いました。
勘違いでしたらごめんなさい。

Comments

[roronoazoro]

ありがとうございます。
返信だいぶ遅くなり申し訳ありません。
階層組み替えてabsoluteで固定することができました。
stickyという記述は知らなかったので勉強になりました。
ありがとうございます。