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.js61
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>);
}