diff options
author | 2018-06-25 14:10:27 +0300 | |
---|---|---|
committer | 2023-01-13 10:37:53 +0300 | |
commit | 1d54694dfc68a31e5f498a4c8f855b6d39456d63 (patch) | |
tree | d399787e16e32e6242837e35900a361b0dd9b3c8 /vnext/src/components/Header.js | |
parent | 28679bfba2d4160cd54fe368e5412aa622cd8c6e (diff) |
Header component
Diffstat (limited to 'vnext/src/components/Header.js')
-rw-r--r-- | vnext/src/components/Header.js | 67 |
1 files changed, 67 insertions, 0 deletions
diff --git a/vnext/src/components/Header.js b/vnext/src/components/Header.js new file mode 100644 index 00000000..fd1c1705 --- /dev/null +++ b/vnext/src/components/Header.js @@ -0,0 +1,67 @@ +import React from 'react'; + +const elClassHidden = 'header--hidden' +const elClassBackground = 'header--background'; + +export default class Header extends React.Component { + constructor(props) { + super(props); + this.dHeight = 0; + this.wHeight = 0; + this.wScrollCurrent = 0; + this.wScrollBefore = 0; + 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 }); + } + throttle(delay, fn) { + var last, deferTimer; + return function () { + var context = this, args = arguments, now = +new Date; + if (last && now < last + delay) { + clearTimeout(deferTimer); + deferTimer = setTimeout( + function () { + last = now; + fn.apply(context, args); + }, + delay); + } else { + last = now; + fn.apply(context, args); + } + }; + }; + render() { + return (<header ref={this.header}>{this.props.children}</header>); + } +}
\ No newline at end of file |