Fix Safari momentum translation

docs/_javascript/main.js

@@ -169,13 +169,13 @@ document.addEventListener('DOMContentLoaded', () => {
   const navbarEl = document.getElementById('navbar');
   const navbarBurger = document.getElementById('navbarBurger');
   const specialShadow = document.getElementById('specialShadow');
-  const navbarHeight = 52;
+  const NAVBAR_HEIGHT = 52;
+  const THRESHOLD = 160;
   let navbarOpen = false;
-  let pinned = false;
-  let horizon = navbarHeight;
+  let horizon = NAVBAR_HEIGHT;
   let whereYouStoppedScrolling = 0;
-  let threshold = 160;
   let scrollFactor = 0;
+  let currentTranslate = 0;
 
   navbarBurger.addEventListener('click', el => {
     navbarOpen = !navbarOpen;
@@ -195,55 +195,69 @@ document.addEventListener('DOMContentLoaded', () => {
   }
 
   function goingDown(currentY) {
-    const trigger = navbarHeight;
+    const trigger = NAVBAR_HEIGHT;
     whereYouStoppedScrolling = currentY;
 
     if (currentY > horizon) {
       horizon = currentY;
     }
 
-    translateHeader(currentY);
+    translateHeader(currentY, false);
   }
 
   function goingUp(currentY) {
     const trigger = 0;
 
-    if (currentY < (whereYouStoppedScrolling - navbarHeight)) {
-      horizon = currentY + navbarHeight;
+    if (currentY < (whereYouStoppedScrolling - NAVBAR_HEIGHT)) {
+      horizon = currentY + NAVBAR_HEIGHT;
     }
 
-    translateHeader(currentY);
+    translateHeader(currentY, true);
   }
 
   function constrainDelta(delta) {
-    return Math.max(0, Math.min(delta, navbarHeight));
+    return Math.max(0, Math.min(delta, NAVBAR_HEIGHT));
   }
 
-  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);
-    `;
+  function translateHeader(currentY, upwards) {
+    // let topTranslateValue;
+    let translateValue;
 
-    if (currentY > threshold * 2) {
+    if (upwards && currentTranslate == 0) {
+      translateValue = 0;
+    } else if (currentY <= NAVBAR_HEIGHT) {
+      translateValue = currentY * -1;
+    } else {
+      const delta = constrainDelta(Math.abs(currentY - horizon));
+      translateValue = delta - NAVBAR_HEIGHT;
+    }
+
+    if (translateValue != currentTranslate) {
+      const navbarStyle = `
+        transform: translateY(${translateValue}px);
+      `;
+      currentTranslate = translateValue;
+      navbarEl.setAttribute('style', navbarStyle);
+    }
+
+    if (currentY > THRESHOLD * 2) {
       scrollFactor = 1;
-    } else if (currentY > threshold) {
-      scrollFactor = (currentY - threshold) / threshold;
+    } else if (currentY > THRESHOLD) {
+      scrollFactor = (currentY - THRESHOLD) / THRESHOLD;
     } else {
       scrollFactor = 0;
     }
+
+    const translateFactor = 1 + translateValue / NAVBAR_HEIGHT;
     specialShadow.style.opacity = scrollFactor;
     specialShadow.style.transform = 'scaleY(' + translateFactor + ')';
-
-    navbarEl.setAttribute('style', navbarStyle);
   }
 
-  translateHeader(window.scrollY);
+  translateHeader(window.scrollY, false);
 
   let ticking = false;
   let lastY = 0;
+
   window.addEventListener('scroll', function() {
     const currentY = window.scrollY;
 

docs/lib/main.js

@@ -171,13 +171,13 @@ document.addEventListener('DOMContentLoaded', function () {
   var navbarEl = document.getElementById('navbar');
   var navbarBurger = document.getElementById('navbarBurger');
   var specialShadow = document.getElementById('specialShadow');
-  var navbarHeight = 52;
+  var NAVBAR_HEIGHT = 52;
+  var THRESHOLD = 160;
   var navbarOpen = false;
-  var pinned = false;
-  var horizon = navbarHeight;
+  var horizon = NAVBAR_HEIGHT;
   var whereYouStoppedScrolling = 0;
-  var threshold = 160;
   var scrollFactor = 0;
+  var currentTranslate = 0;
 
   navbarBurger.addEventListener('click', function (el) {
     navbarOpen = !navbarOpen;
@@ -197,53 +197,67 @@ document.addEventListener('DOMContentLoaded', function () {
   }
 
   function goingDown(currentY) {
-    var trigger = navbarHeight;
+    var trigger = NAVBAR_HEIGHT;
     whereYouStoppedScrolling = currentY;
 
     if (currentY > horizon) {
       horizon = currentY;
     }
 
-    translateHeader(currentY);
+    translateHeader(currentY, false);
   }
 
   function goingUp(currentY) {
     var trigger = 0;
 
-    if (currentY < whereYouStoppedScrolling - navbarHeight) {
-      horizon = currentY + navbarHeight;
+    if (currentY < whereYouStoppedScrolling - NAVBAR_HEIGHT) {
+      horizon = currentY + NAVBAR_HEIGHT;
     }
 
-    translateHeader(currentY);
+    translateHeader(currentY, true);
   }
 
   function constrainDelta(delta) {
-    return Math.max(0, Math.min(delta, navbarHeight));
+    return Math.max(0, Math.min(delta, NAVBAR_HEIGHT));
   }
 
-  function translateHeader(currentY) {
-    var delta = constrainDelta(Math.abs(currentY - horizon));
-    var translateValue = delta - navbarHeight;
-    var translateFactor = 1 + translateValue / navbarHeight;
-    var navbarStyle = '\n      transform: translateY(' + translateValue + 'px);\n    ';
+  function translateHeader(currentY, upwards) {
+    // let topTranslateValue;
+    var translateValue = void 0;
 
-    if (currentY > threshold * 2) {
+    if (upwards && currentTranslate == 0) {
+      translateValue = 0;
+    } else if (currentY <= NAVBAR_HEIGHT) {
+      translateValue = currentY * -1;
+    } else {
+      var delta = constrainDelta(Math.abs(currentY - horizon));
+      translateValue = delta - NAVBAR_HEIGHT;
+    }
+
+    if (translateValue != currentTranslate) {
+      var navbarStyle = '\n        transform: translateY(' + translateValue + 'px);\n      ';
+      currentTranslate = translateValue;
+      navbarEl.setAttribute('style', navbarStyle);
+    }
+
+    if (currentY > THRESHOLD * 2) {
       scrollFactor = 1;
-    } else if (currentY > threshold) {
-      scrollFactor = (currentY - threshold) / threshold;
+    } else if (currentY > THRESHOLD) {
+      scrollFactor = (currentY - THRESHOLD) / THRESHOLD;
     } else {
       scrollFactor = 0;
     }
+
+    var translateFactor = 1 + translateValue / NAVBAR_HEIGHT;
     specialShadow.style.opacity = scrollFactor;
     specialShadow.style.transform = 'scaleY(' + translateFactor + ')';
-
-    navbarEl.setAttribute('style', navbarStyle);
   }
 
-  translateHeader(window.scrollY);
+  translateHeader(window.scrollY, false);
 
   var ticking = false;
   var lastY = 0;
+
   window.addEventListener('scroll', function () {
     var currentY = window.scrollY;