Add scroll reveal

docs/_javascript/main.js

@@ -57,7 +57,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
   // Modals
 
-  const $html = document.documentElement;
+  const rootEl = document.documentElement;
   const $modals = getAll('.modal');
   const $modalButtons = getAll('.modal-button');
   const $modalCloses = getAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button');
@@ -67,7 +67,7 @@ document.addEventListener('DOMContentLoaded', () => {
       $el.addEventListener('click', () => {
         const target = $el.dataset.target;
         const $target = document.getElementById(target);
-        $html.classList.add('is-clipped');
+        rootEl.classList.add('is-clipped');
         $target.classList.add('is-active');
       });
     });
@@ -90,7 +90,7 @@ document.addEventListener('DOMContentLoaded', () => {
   });
 
   function closeModals() {
-    $html.classList.remove('is-clipped');
+    rootEl.classList.remove('is-clipped');
     $modals.forEach($el => {
       $el.classList.remove('is-active');
     });
@@ -164,27 +164,96 @@ document.addEventListener('DOMContentLoaded', () => {
     return Array.prototype.slice.call(document.querySelectorAll(selector), 0);
   }
 
-  let latestKnownScrollY = 0;
-  let ticking = false;
+  // Scrolling
 
-  function scrollUpdate() {
-    ticking = false;
-    // do stuff
-  }
+  const navbarEl = document.getElementById('navbar');
+  const navbarBurger = document.getElementById('navbarBurger');
+  const specialShadow = document.getElementById('specialShadow');
+  const navbarHeight = 52;
+  let navbarOpen = false;
+  let pinned = false;
+  let horizon = navbarHeight;
+  let whereYouStoppedScrolling = 0;
+  let threshold = 200;
+  let scrollFactor = 0;
 
+  navbarBurger.addEventListener('click', el => {
+    navbarOpen = !navbarOpen;
 
-  function onScroll() {
-    latestKnownScrollY = window.scrollY;
-    scrollRequestTick();
-  }
-
-  function scrollRequestTick() {
-    if(!ticking) {
-      requestAnimationFrame(scrollUpdate);
+    if (navbarOpen) {
+      rootEl.classList.add('bd-is-clipped-touch');
+    } else {
+      rootEl.classList.remove('bd-is-clipped-touch');
     }
-    ticking = true;
+  });
+
+  function upOrDown(lastY, currentY) {
+    if (currentY >= lastY) {
+      return goingDown(currentY);
+    }
+    return goingUp(currentY);
   }
 
-   window.addEventListener('scroll', onScroll, false);
+  function goingDown(currentY) {
+    const trigger = navbarHeight;
+    whereYouStoppedScrolling = currentY;
+
+    if (currentY > horizon) {
+      horizon = currentY;
+    }
+
+    translateHeader(currentY);
+  }
+
+  function goingUp(currentY) {
+    const trigger = 0;
+
+    if (currentY < (whereYouStoppedScrolling - navbarHeight)) {
+      horizon = currentY + navbarHeight;
+    }
+
+    translateHeader(currentY);
+  }
+
+  function constrainDelta(delta) {
+    return Math.max(0, Math.min(delta, navbarHeight));
+  }
+
+  function translateHeader(currentY) {
+    const delta = constrainDelta(Math.abs(currentY - horizon));
+    const translateValue = delta - navbarHeight;
+    const translateFactor = 1 + translateValue / navbarHeight;
+    let navbarStyle = `
+      transform: translateY(${translateValue}px);
+    `;
+
+    if (currentY > threshold) {
+      scrollFactor = 1;
+    } else {
+      scrollFactor = currentY / threshold;
+    }
+    specialShadow.style.opacity = scrollFactor;
+    specialShadow.style.transform = 'scaleY(' + translateFactor + ')';
+
+    navbarEl.setAttribute('style', navbarStyle);
+  }
+
+  translateHeader(window.scrollY);
+
+  let ticking = false;
+  let lastY = 0;
+  window.addEventListener('scroll', function() {
+    const currentY = window.scrollY;
+
+    if (!ticking) {
+      window.requestAnimationFrame(function() {
+        upOrDown(lastY, currentY);
+        ticking = false;
+        lastY = currentY;
+      });
+    }
+
+    ticking = true;
+  });
 
 });