From 882085a170013c4239081d43fab8a3e3596380a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?F=C3=A1bio=20Moreira?=
 <fabiommmoreira@shobus-MBP.localdomain>
Date: Mon, 14 May 2018 12:18:59 +0100
Subject: [PATCH] feat(ui-toolkit): skip parallax header after user scrolls

---
 .../ui-toolkit/src/styleguide/parallax.js     | 48 ++++++++++++++-----
 1 file changed, 37 insertions(+), 11 deletions(-)

diff --git a/packages/ui-toolkit/src/styleguide/parallax.js b/packages/ui-toolkit/src/styleguide/parallax.js
index 8298402c..b34a45e0 100644
--- a/packages/ui-toolkit/src/styleguide/parallax.js
+++ b/packages/ui-toolkit/src/styleguide/parallax.js
@@ -53,12 +53,17 @@ const Img = styled.img`
 const gutterWidth = 47 + 70;
 const windowWidth = (window || {}).outerWidth + 70;
 
+let isScrolling;
+
 const isScrolledOutsideView = () => {
   const elem = document.getElementById('parallaxWrapper');
-  const eleHeight = elem.clientHeight;
-  const scrollY = window.scrollY;
+  if (elem) {
+    const eleHeight = elem.clientHeight;
+    const scrollY = window.scrollY;
 
-  return scrollY > eleHeight;
+    return scrollY >= eleHeight;
+  }
+  return true;
 };
 
 export default class extends Component {
@@ -68,6 +73,35 @@ export default class extends Component {
     show: true
   };
 
+  componentDidMount() {
+    if (this.props.hideAfterScroll) {
+      isScrolledOutsideView()
+        ? this.setState({ show: false })
+        : window.addEventListener('scroll', this.scrollStopHandler);
+    }
+  }
+
+  scrollStopHandler = () => {
+    window.clearTimeout(isScrolling);
+    isScrolling = setTimeout(() => {
+      isScrolledOutsideView()
+        ? this.setState({ show: false }, () =>
+            window.removeEventListener('scroll', this.scrollStopHandler)
+          )
+        : this.skipParallax();
+    }, 66);
+  };
+
+  skipParallax = () => {
+    if (this.state.show) {
+      window.scroll({
+        top: document.getElementsByTagName('header')[0].offsetTop,
+        left: 0,
+        behavior: 'smooth'
+      });
+    }
+  };
+
   render() {
     window.addEventListener('resize', () => {
       this.setState({
@@ -76,14 +110,6 @@ export default class extends Component {
       });
     });
 
-    if (this.props.hideAfterScroll) {
-      window.addEventListener('scroll', () => {
-        if (this.state.show && isScrolledOutsideView()) {
-          this.setState({ show: false });
-        }
-      });
-    }
-
     const array = Array.apply(null, { length: this.state.value }).map(
       Number.call,
       Number