ReactDOM.createPortal

1 files changed, 7 insertions, 9 deletions

diff --git a/vnext/src/components/Header.js b/vnext/src/components/Header.js
index 91fa02fd..282724b8 100644
--- a/vnext/src/components/Header.js
+++ b/vnext/src/components/Header.js
@@ -1,8 +1,10 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 
 const elClassHidden = 'header--hidden';
-const elClassBackground = 'header--background';
+
+const header = document.getElementById('header');
 
 export default class Header extends React.Component {
     constructor(props) {
@@ -12,21 +14,21 @@ export default class Header extends React.Component {
         this.wScrollCurrent = 0;
         this.wScrollBefore = 0;
         this.wScrollDiff = 0;
-        this.header = React.createRef();
     }
     componentDidMount() {
+        header.removeChild(document.getElementById('header_wrapper'));
         window.addEventListener('scroll', () => (!window.requestAnimationFrame)
             ? this.throttle(250, this.updateHeader)
             : window.requestAnimationFrame(this.updateHeader), false);
     }
     throttle(delay, fn) {
         var last, deferTimer;
-        return function () {
+        return function() {
             var context = this, args = arguments, now = +new Date;
             if (last && now < last + delay) {
                 clearTimeout(deferTimer);
                 deferTimer = setTimeout(
-                    function () {
+                    function() {
                         last = now;
                         fn.apply(context, args);
                     },
@@ -38,7 +40,6 @@ 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;
@@ -47,17 +48,14 @@ export default class Header extends React.Component {
         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);
@@ -66,7 +64,7 @@ export default class Header extends React.Component {
         this.wScrollBefore = this.wScrollCurrent;
     }
     render() {
-        return (<header id="header" ref={this.header} style={this.props.style || {}}>{this.props.children}</header>);
+        return ReactDOM.createPortal(this.props.children, header);
     }
 }