1 files changed, 11 insertions, 6 deletions
diff --git a/vnext/src/ui/Header.js b/vnext/src/ui/Header.js
index b25879d4..2d042bfe 100644
--- a/vnext/src/ui/Header.js
+++ b/vnext/src/ui/Header.js
@@ -13,11 +13,10 @@ export default function Header({ children }) {
     let wScrollBefore = useRef(0);
     let wScrollDiff = useRef(0);
 
-    useEffect(() => {
-        window.addEventListener('scroll', () => (!window.requestAnimationFrame)
-            ? throttle(250, updateHeader)
-            : window.requestAnimationFrame(updateHeader), false);
-    }, [updateHeader]);
+    /**
+     * @param {number} delay
+     * @param {{ (): void; apply?: any; }} fn
+     */
     let throttle = (delay, fn) => {
         var last, deferTimer;
         return function () {
@@ -45,7 +44,7 @@ export default function Header({ children }) {
         if (wScrollCurrent.current <= 0) {
             // scrolled to the very top; element sticks to the top
             header.classList.remove(elClassHidden);
-        } else if (wScrollDiff > 0 && header.classList.contains(elClassHidden)) {
+        } else if (wScrollDiff.current > 0 && header.classList.contains(elClassHidden)) {
             // scrolled up; element slides in
             header.classList.remove(elClassHidden);
         } else if (wScrollDiff.current < 0) {
@@ -60,6 +59,12 @@ export default function Header({ children }) {
         }
         wScrollBefore.current = wScrollCurrent.current;
     }, []);
+
+    useEffect(() => {
+        window.addEventListener('scroll', () => (!window.requestAnimationFrame)
+            ? throttle(250, updateHeader)
+            : window.requestAnimationFrame(updateHeader), false);
+    }, [updateHeader]);
     return ReactDOM.createPortal(children, header);
 }