Reveal Shop header when scrolling past Intro block

src/routes/shop/__layout.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import { cartOpen } from '$utils/store'
+    import { onMount } from 'svelte'
     // Components
     import Metas from '$components/Metas.svelte'
     import SiteTitle from '$components/atoms/SiteTitle.svelte'
@@ -15,6 +16,29 @@
     export let locations: any
     export let posters: any
     export let product: any
+
+    let navEl: HTMLElement, introEl: HTMLElement
+    let navObserver: IntersectionObserver
+
+
+    onMount(async () => {
+        // Reveal the nav past the Intro
+        navObserver = new IntersectionObserver(entries => {
+            entries.forEach(entry => {
+                navEl.classList.toggle('is-visible', !entry.isIntersecting)
+            })
+        }, {
+            threshold: 0,
+            rootMargin: '0px 0px 0px'
+        })
+        navObserver.observe(introEl)
+
+
+        // Destroy
+        return () => {
+            navObserver && navObserver.unobserve(introEl)
+        }
+    })
 </script>
 
 <Metas
@@ -28,6 +52,7 @@
         <Cart />
     {/if}
     <section class="shop-page__intro">
+    <section class="shop-page__intro" bind:this={introEl}>
         <a href="/" class="back">
             Back to Houses Of
         </a>
@@ -68,7 +93,7 @@
         />
     </section>
 
-    <nav class="shop-location">
+    <nav class="shop-location" bind:this={navEl}>
         <dl class="shop-location__left">
             <dt class="text-label">shop your city</dt>
             <dd>