Section 9 - Sticky Navigation Bar

Author: andreituicu

starter/07-Omnifood-Desktop/css/style.css

@@ -36,6 +36,24 @@
   display: none;
 }
 
+.sticky .header {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 8rem;
+  padding-top: 0;
+  padding-bottom: 0;
+  background-color: rgba(255, 255, 255, 0.97);
+  z-index: 999;
+  box-shadow: 0 1.2rem 3.2rem rgba(0, 0, 0, 0.03);
+}
+
+.sticky .section-hero {
+  /* offset for the difference when removing the header from flow */
+  margin-top: 9.6rem;
+}
+
 /**********************/
 /* NAVIGATION */
 /**********************/

starter/07-Omnifood-Desktop/js/script.js

@@ -37,6 +37,25 @@ allLinks.forEach((link) => {
   });
 });
 
+// Sticky navigation
+const observer = new IntersectionObserver(
+  function (entries) {
+    if (!entries[0].isIntersecting) {
+      document.body.classList.add("sticky");
+    } else {
+      document.body.classList.remove("sticky");
+    }
+  },
+  {
+    // In the viewport
+    root: null,
+    // How much of the observed element is in the view port
+    threshold: 0,
+    rootMargin: "-80px",
+  }
+);
+observer.observe(document.querySelector(".section-hero"));
+
 ///////////////////////////////////////////////////////////
 // Fixing flexbox gap property missing in some Safari versions
 function checkFlexGap() {