update header animation

1 files changed, 32 insertions, 29 deletions

diff --git a/vnext/src/components/Header.js b/vnext/src/components/Header.js
index 43935f4c..68375d48 100644
--- a/vnext/src/components/Header.js
+++ b/vnext/src/components/Header.js
@@ -14,35 +14,10 @@ export default class Header extends React.Component {
         this.wScrollDiff = 0;
         this.header = React.createRef();
     }
-    componentDidMount() {
-        const header = this.header.current;
-        window.addEventListener('scroll', this.throttle(250, () => {
-            this.dHeight = document.body.offsetHeight;
-            this.wHeight = window.innerHeight;
-            this.wScrollCurrent = window.pageYOffset;
-            this.wScrollDiff = this.wScrollBefore - this.wScrollCurrent;
-
-            if (this.wScrollCurrent <= 0) {
-                // scrolled to the very top; element sticks to the top
-                header.classList.remove(elClassHidden);
-                header.classList.remove(elClassBackground);
-            } else if (this.wScrollDiff > 0 && header.classList.contains(elClassHidden)) {
-                // scrolled up; element slides in
-                header.classList.remove(elClassHidden);
-                header.classList.add(elClassBackground);
-            } else if (this.wScrollDiff < 0) {
-                // scrolled down
-                if (this.wScrollCurrent + this.wHeight >= this.dHeight && header.classList.contains(elClassHidden)) {
-                    // scrolled to the very bottom; element slides in
-                    header.classList.remove(elClassHidden);
-                    header.classList.add(elClassBackground);
-                } else {
-                    // scrolled down; element slides out
-                    header.classList.add(elClassHidden);
-                }
-            }
-            this.wScrollBefore = this.wScrollCurrent;
-        }), { passive: true });
+    componentDidMount() {        
+        window.addEventListener('scroll', () => (!window.requestAnimationFrame) 
+        ? this.throttle(250, this.updateHeader)
+        : window.requestAnimationFrame(this.updateHeader), false);
     }
     throttle(delay, fn) {
         var last, deferTimer;
@@ -62,6 +37,34 @@ export default class Header extends React.Component {
             }
         };
     }
+    updateHeader = () => {
+        const header = this.header.current;
+        this.dHeight = document.body.offsetHeight;
+        this.wHeight = window.innerHeight;
+        this.wScrollCurrent = window.pageYOffset;
+        this.wScrollDiff = this.wScrollBefore - this.wScrollCurrent;
+
+        if (this.wScrollCurrent <= 0) {
+            // scrolled to the very top; element sticks to the top
+            header.classList.remove(elClassHidden);
+            header.classList.remove(elClassBackground);
+        } else if (this.wScrollDiff > 0 && header.classList.contains(elClassHidden)) {
+            // scrolled up; element slides in
+            header.classList.remove(elClassHidden);
+            header.classList.add(elClassBackground);
+        } else if (this.wScrollDiff < 0) {
+            // scrolled down
+            if (this.wScrollCurrent + this.wHeight >= this.dHeight && header.classList.contains(elClassHidden)) {
+                // scrolled to the very bottom; element slides in
+                header.classList.remove(elClassHidden);
+                header.classList.add(elClassBackground);
+            } else {
+                // scrolled down; element slides out
+                header.classList.add(elClassHidden);
+            }
+        }
+        this.wScrollBefore = this.wScrollCurrent;
+    }
     render() {
         return (<header ref={this.header}>{this.props.children}</header>);
     }