Convert Preview to One Pager

preview/html/css/style.css

@@ -38,6 +38,20 @@ body {
     color: rgb(31, 31, 31);
 }
 
+.sticky {
+    position: fixed;
+    top: 0;
+    width: 100%
+}
+
+.sticky+.banner {
+    margin-top: 120px;
+}
+
+.sticky .header-content {
+    padding: 20px 0;
+}
+
 .header-content {
     display: flex;
     flex-direction: column;
@@ -49,6 +63,7 @@ body {
     max-width: 1800px;
     margin: 0 auto;
     width: 95%;
+    transition: padding .4s ease;
 }
 
 .header-content #logo,
@@ -67,7 +82,7 @@ body {
 #menu a {
     color: black;
     text-decoration: none;
-    font-size: 28px;
+    font-size: 1.4em;
 }
 
 .banner {
@@ -232,6 +247,8 @@ section h2 {
 
 .container {
     margin: 40px auto;
+    padding-top: 40px;
+    padding-bottom: 40px;
     width: 95%;
     max-width: 1800px;
 }
@@ -408,7 +425,7 @@ footer img {
     }
 
     #menu a {
-        font-size: 25px;
+        font-size: 1.4em;
     }
 
     .header-content #logo,
@@ -490,7 +507,7 @@ footer img {
     }
 
     #menu a {
-        font-size: 30px;
+        font-size: 1.6em;
     }
 
     .header-content,
@@ -499,7 +516,7 @@ footer img {
         width: auto;
     }
 
-    .banner{
+    .banner {
         min-height: 300px;
     }
 }

preview/html/js/menu.js

@@ -10,3 +10,20 @@ document.getElementById("close").addEventListener("click", () => {
     document.body.style.overflow = "auto"
 })
 
+// When the user scrolls the page, execute myFunction
+window.onscroll = function () { myFunction() };
+
+// Get the header
+var header = document.getElementById("myHeader");
+
+// Get the offset position of the navbar
+var sticky = header.offsetTop;
+
+// Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position
+function myFunction() {
+    if (window.scrollY > sticky) {
+        header.classList.add("sticky");
+    } else {
+        header.classList.remove("sticky");
+    }
+}
\ No newline at end of file