Header interaction

Author: si-em

src/App.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { onMount } from 'svelte'
+  import { onMount, tick } from 'svelte'
   import { Router, Route } from 'svelte-routing'
 
   // Components
@@ -21,36 +21,52 @@
    */
   let hasScrolled = false
   let header
+  let headerEl
+  let main
+  let mainY
 
   const onScroll = ev => {
     const y = window.scrollY
     if (!hasScrolled && y > 50) {
       hasScrolled = true
       document.documentElement.style.setProperty('--color-active-bg', 'var(--color-light)')
-
     } else if (hasScrolled && y < 50) {
       hasScrolled = false
       document.documentElement.style.setProperty('--color-active-bg', 'var(--color-salmon)')
     }
 
-    // if (hasScrolled && y > 300) {
-    //   header.classList.add('scrolled')
-    // } else {
-    //   header.classList.remove('scrolled')
-    // }
+    if (hasScrolled && mainY && y > mainY) {
+      header.moveForward()
+    } else {
+      header.moveBack()
+    }
+  }
+
+  const remToPx = (rem) => {
+    return rem * parseFloat(getComputedStyle(document.documentElement).fontSize)
   }
 
-  onMount(() => {
+  const setHeaderTransition = () => {
+    const scrollOffset = window.scrollY
+    const mainPos = main.getBoundingClientRect().top
+    const headerHeight = remToPx(5.3)
+
+    mainY = scrollOffset + mainPos - headerHeight
+  }
 
-    window.addEventListener('scroll', onScroll)
+  onMount(async () => {
+    window.addEventListener('scroll', onScroll, { passive: true })
+    window.addEventListener('resize', setHeaderTransition, { passive: true })
+    await tick()
+    setHeaderTransition()
   })
 </script>
 
 <div class="root" class:scrolled={hasScrolled}>
   <Router url={url}>
-    <AppHeader bind:header={header} />
+    <AppHeader bind:header={headerEl} bind:this={header}/>
 
-    <main>
+    <main bind:this={main}>
       <Route path="about" component={About}/>
       <Route path="contribute" component={Contribute}/>
       <Route path="license" component={License}/>

src/components/AppHeader.svelte

@@ -4,12 +4,34 @@
   import Logo from './Logo.svelte'
   import AppNav from './AppNav.svelte'
 
-  export let header
+  export let header = null
 
+  let height
   let shadow
+  let fade
+
+  let open = false
+  let top = false
+
+  export const moveForward = () => {
+    if (!top) top = true
+  }
+  export const moveBack = () => {
+    if (top) top = false
+  }
 
   const onResize = () => {
-    shadow.style.height = header.offsetHeight + 'px'
+    height = header.offsetHeight + 'px'
+    shadow.style.height = height
+    fade.style.height = height
+  }
+  const onMouseenter = () => {
+    open = true
+    if (top) header.style.height = height
+  }
+  const onMouseleave = () => {
+    open = false
+    if (top) header.style = null
   }
 
   onMount(() => {
@@ -18,11 +40,19 @@
   })
 </script>
 
-<span class="header-shadow" bind:this={shadow}/>
+<span
+  bind:this={shadow}
+  class="header-shadow"
+  aria-hidden="true"
+/>
 
 <header
   class="header"
   bind:this={header}
+  class:top={top}
+  class:open={top && open}
+  on:mouseenter={onMouseenter}
+  on:mouseleave={onMouseleave}
 >
   <div class="header-logo">
     <Link to="/" title="Go to homepage"><Logo/></Link>
@@ -38,6 +68,7 @@
   <div class="header-nav">
     <AppNav/>
   </div>
+  <span class="header-fade" aria-hidden="true" bind:this={fade} />
 </header>
 
 <style lang="scss">
@@ -52,11 +83,15 @@
     width: 100vw;
     height: auto;
     padding: 1rem;
+    background-color: var(--color-active-bg);
     border-bottom: solid 1px transparent;
+    transition: ease 0.15s background-color;
 
     &-logo {
       order: 1;
       grid-column: span 4;
+      position: relative;
+      z-index: 2;
 
       @include from(medium) {
         grid-column: span 3;
@@ -102,16 +137,42 @@
         grid-column: 13 / span 6;
       }
     }
+
+    &-fade {
+      content: '';
+      position: absolute;
+      pointer-events: none;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 5.3rem;
+      background: linear-gradient(to bottom, #fff0, #ffff 5rem);
+      opacity: 0;
+      transition: ease 0.3s opacity;
+    }
+
+    &.top {
+      z-index: 3;
+      height: 5.3rem;
+      overflow: hidden;
+      border-color: var(--color-dark);
+      transition: ease 0.15s background-color,
+                  ease 0.3s height;
+
+      .header-fade {
+        opacity: 1;
+      }
+
+      &.open {
+        .header-fade {
+          opacity: 0;
+        }
+      }
+    }
   }
 
   .header-shadow {
     display: block;
     width: 100%;
   }
-
-  :global(.header.scrolled) {
-    border-color: var(--color-dark);
-    background-color: var(--color-active-bg);
-    z-index: 10;
-  }
 </style>