diff options
| -rw-r--r-- | vnext/src/components/Header.js | 61 | ||||
| -rw-r--r-- | vnext/src/style/main.css | 4 |
2 files changed, 34 insertions, 31 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>); } diff --git a/vnext/src/style/main.css b/vnext/src/style/main.css index 3947b0b0..c5e33ef7 100644 --- a/vnext/src/style/main.css +++ b/vnext/src/style/main.css @@ -91,8 +91,8 @@ noscript article { top: 0; width: 100%; z-index: 10; - transition-duration: 0.5s; - transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + transition-duration: 0.4s; + transition-timing-function: ease-in-out; transition-property: transform; } @supports (backdrop-filter: blur(10px)) { |