css grid レイアウトでスクロール時に一部のみ常時固定にする方法を教えて下さい。

Question

グリッドレイアウトについてです。宜しくお願いします。

解決したいこと
以下ソースで、h1はposition:stickyで固定できていますが、navを常時固定（mainとsideだけスクロールされる）には
記述をどのようにすればよいでしょうか。

宜しくお願い致します。

HTML

<h1>タイトル</h1> <main>メイン</main> <nav>ナビ</nav> <aside id="side">サイド</aside> <footer>フッター</footer> <aside id="ad">広告</aside>

CSS

body {
display: grid;
margin: 0;
min-height: 100vh;
grid-template-rows: 100px 100px 1fr 100px;
grid-template-columns: 100px 1fr 100px;
grid-template-areas:
"title title title "
"nav main ad "
"nav main side "
"footer footer footer";
}
body > * {
margin: 3px;
padding: 10px;
}
h1 {
grid-area: title;
background: #faa;
border-radius: 10px 10px 0 0;
position:sticky;
top:0;
}
main {
grid-area: main;
background: #afa;
}
nav {
grid-area: nav;
background: #aaf;
}

side {
grid-area: side;
background: #faf;
}
footer {
grid-area: footer;
background: #aaa;
border-radius: 0 0 10px 10px;
}
ad {
grid-area: ad;
background: #888;
}

Answer 1

**position: fixed;**を挿入すると良いです！

nav {
grid-area: nav;
background: #aaf;
}

上記の部分を以下のように書き換えると良いと思います。

nav {
grid-area: nav;
background: #aaf;
position: fixed;
}

参考　ヘッダー・ナビゲーションを固定表示させるアイデア5つ