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) => (
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 = ({