feat(ui-toolkit): improve parallax scroll behaviour

packages/ui-toolkit/src/styleguide/parallax.js

@@ -82,18 +82,19 @@ export default class extends Component {
   }
 
   scrollStopHandler = () => {
-    window.clearTimeout(isScrolling);
+    window.removeEventListener('scroll', this.scrollStopHandler);
-    isScrolling = setTimeout(() => {
+    window.addEventListener('scroll', this.checkpoint);
+
     isScrolledOutsideView()
-        ? this.setState({ show: false }, () =>
+      ? this.setState({ show: false })
-            window.removeEventListener('scroll', this.scrollStopHandler)
-          )
       : this.skipParallax();
-    }, 66);
   };
 
   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) => (
           <Gutter key={g} style={{ left: gutterWidth * i }} />
         ))}
-        <Parallax offsetYMax={50} offsetYMin={-50} slowerScrollRate tag="main">
+        <Parallax offsetYMax={50} offsetYMin={-50} tag="main">
           <Text>
             <Img src={Plus} />
             <Img topRight src={Plus} />
@@ -136,6 +144,10 @@ export default class extends Component {
               elements, components and guidelines, for anyone developing
               products within the Joyent and Triton ecosystems.
             </P>
+          </Text>
+        </Parallax>
+        <Parallax offsetYMax={200} offsetYMin={0} slowerScrollRate tag="main">
+          <Text>
             <P white style={{ marginTop: remcalc(60), position: 'absolute' }}>
               Scroll down
             </P>

packages/ui-toolkit/src/styleguide/renderer.js

@@ -61,7 +61,7 @@ const StyleGuideRenderer = ({
     <ThemeProvider theme={fullTheme}>
       <ParallaxProvider>
         <Fragment>
-          {link === '/' ? <Parallax hideAfterScroll="true" /> : null}
+          {link === '/' ? <Parallax hideAfterScroll={true} /> : null}
           <Header />
           <Grid style={{ marginLeft: 0, zIndex: 2, position: 'relative' }}>
             <Main>