position: sticky;

style.css

@@ -0,0 +1,72 @@
+/* ease of use variable for the navbar height */
+:root {
+    --nav-height: 70px;
+}
+
+html, body {
+    height: 100%;
+    background: white;
+    margin: 0;
+}
+
+.wrapper {
+    display: grid;
+    grid-template-rows: auto auto;
+    grid-template-columns: auto;
+}
+
+nav {
+    background: blue;
+    position: sticky;
+    top: 0;
+    z-index: 2;
+    height: var(--nav-height);
+}
+
+ul {
+    display: flex;
+    flex-flow: row;
+    list-style: none;
+}
+
+li {
+    padding: 10px;
+    background: black;
+    color: white;
+}
+
+h1 {
+    margin: 0;
+}
+
+.content {
+    height: 100%;
+    background: black;
+}
+
+div.blah1, div.blah2, div.blah3 {
+    border: 5px solid rgb(128, 8, 8);
+    margin: 5px;
+    background: black;
+    color: #26ff00;
+    text-shadow: 1px 1px black;
+    padding: 5px;
+}
+
+div.blah1 h1 {
+    position: sticky;
+    top: var(--nav-height);
+    background: violet;
+}
+
+div.blah2 h1 {
+    position: sticky;
+    top: var(--nav-height);
+    background: yellow;
+}
+
+div.blah3 h1 {
+    position: sticky;
+    top: var(--nav-height);
+    background: chartreuse;
+}