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 gutterWidth = 47 + 70;
const windowWidth = (window || {}).outerWidth + 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 { export default class extends Component {
state = { state = {
value: parseInt(windowWidth / gutterWidth, 10), value: parseInt(windowWidth / gutterWidth, 10),
windowWidth windowWidth,
show: true
}; };
render() { 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( const array = Array.apply(null, { length: this.state.value }).map(
Number.call, Number.call,
Number Number
); );
if (!this.state.show) {
return null;
}
return ( return (
<Wrapper> <Wrapper id="parallaxWrapper">
{array.map((g, i) => ( {array.map((g, i) => (
<Gutter key={g} style={{ left: gutterWidth * i }} /> <Gutter key={g} style={{ left: gutterWidth * i }} />
))} ))}

View File

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