aboutsummaryrefslogtreecommitdiff
path: root/vnext/src/components/Header.js
diff options
context:
space:
mode:
Diffstat (limited to 'vnext/src/components/Header.js')
-rw-r--r--vnext/src/components/Header.js16
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);
}
}