From a1154b2520e694364a0d49a188ca2eb306d7fc96 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A1bio=20Moreira?= Date: Mon, 14 May 2018 18:29:34 +0100 Subject: [PATCH] feat(ui-toolkit): improve parallax scroll behaviour --- .../ui-toolkit/src/styleguide/parallax.js | 32 +++++++++++++------ .../ui-toolkit/src/styleguide/renderer.js | 2 +- 2 files changed, 23 insertions(+), 11 deletions(-) diff --git a/packages/ui-toolkit/src/styleguide/parallax.js b/packages/ui-toolkit/src/styleguide/parallax.js index b34a45e0..14c8c638 100644 --- a/packages/ui-toolkit/src/styleguide/parallax.js +++ b/packages/ui-toolkit/src/styleguide/parallax.js @@ -82,18 +82,19 @@ export default class extends Component { } scrollStopHandler = () => { - window.clearTimeout(isScrolling); - isScrolling = setTimeout(() => { - isScrolledOutsideView() - ? this.setState({ show: false }, () => - window.removeEventListener('scroll', this.scrollStopHandler) - ) - : this.skipParallax(); - }, 66); + window.removeEventListener('scroll', this.scrollStopHandler); + window.addEventListener('scroll', this.checkpoint); + + isScrolledOutsideView() + ? this.setState({ show: false }) + : this.skipParallax(); }; skipParallax = () => { - if (this.state.show) { + if ( + this.state.show && + window.scrollY < document.getElementsByTagName('header')[0].offsetTop + ) { window.scroll({ top: document.getElementsByTagName('header')[0].offsetTop, left: 0, @@ -102,6 +103,13 @@ export default class extends Component { } }; + checkpoint = () => { + if (isScrolledOutsideView()) { + window.removeEventListener('scroll', this.checkpoint); + this.setState({ show: false }); + } + }; + render() { window.addEventListener('resize', () => { this.setState({ @@ -124,7 +132,7 @@ export default class extends Component { {array.map((g, i) => ( ))} - + @@ -136,6 +144,10 @@ export default class extends Component { elements, components and guidelines, for anyone developing products within the Joyent and Triton ecosystems.

+
+
+ +

Scroll down

diff --git a/packages/ui-toolkit/src/styleguide/renderer.js b/packages/ui-toolkit/src/styleguide/renderer.js index 60655620..4e417420 100644 --- a/packages/ui-toolkit/src/styleguide/renderer.js +++ b/packages/ui-toolkit/src/styleguide/renderer.js @@ -61,7 +61,7 @@ const StyleGuideRenderer = ({ - {link === '/' ? : null} + {link === '/' ? : null}