diff options
author | 2018-12-10 15:46:33 +0300 | |
---|---|---|
committer | 2023-01-13 10:37:54 +0300 | |
commit | 05f1cd52732b1fc57e13ea41239fbc10299a0e01 (patch) | |
tree | 2a3c8d99cb7b7a76319def26cc9ef1bb5703b3b4 /vnext/src/components/Header.js | |
parent | 231f880af5634885bfa1a494eccef92bbf72c214 (diff) |
ReactDOM.createPortal
Diffstat (limited to 'vnext/src/components/Header.js')
-rw-r--r-- | vnext/src/components/Header.js | 16 |
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); } } |