feat(ui-toolkit): add parallax header after scroll

This commit is contained in:
Fábio Moreira 2018-05-11 17:38:50 +01:00 committed by Sérgio Ramos
parent bd332423be
commit 77fd895b6c
2 changed files with 24 additions and 3 deletions

View File

@ -53,10 +53,19 @@ const Img = styled.img`
const gutterWidth = 47 + 70;
const windowWidth = (window || {}).outerWidth + 70;
const isScrolledOutsideView = () => {
const elem = document.getElementById('parallaxWrapper');
const eleHeight = elem.clientHeight;
const scrollY = window.scrollY;
return scrollY > eleHeight;
};
export default class extends Component {
state = {
value: parseInt(windowWidth / gutterWidth, 10),
windowWidth
windowWidth,
show: true
};
render() {
@ -67,13 +76,25 @@ 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
);
if (!this.state.show) {
return null;
}
return (
<Wrapper>
<Wrapper id="parallaxWrapper">
{array.map((g, i) => (
<Gutter key={g} style={{ left: gutterWidth * i }} />
))}

View File

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