Реагировать - динамический липкий нижний колонтитул
Я хочу сделать нижний колонтитул липким или не основанным на том, если высота тела больше, чем высота окна.
Когда я меняю страницу, я получаю неправильный рост, который был бы на той странице, на которой я был раньше.
У меня есть маршрут (/projects/: папка) с параметром, который загружает тот же компонент, и у меня также есть проблемы здесь, потому что это та же страница. Как я могу сделать?
Вот мой роутер:
<Router>
<AutoScrollToTop>
<LocationListener {...this.props}/>
<Header/>
<Container>
<Switch>
<Route exact path="/" component={Projects}/>
<Route exact path="/projects/:folder?" component={Projects}/>
<Route exact path="/projects/:folder/:id" component={Sketch}/>
<Route exact path="/projects/:folder/:id/details" component={Details}/>
<Route component={NoMatch}/>
</Switch>
</Container>
<Footer/>
</AutoScrollToTop>
</Router>
И здесь есть мой компонент LocationListener:
static contextTypes = {
history: PropTypes.object,
};
...
stickyFooter(active) {
var footer = document.querySelector('.footer');
if (active) {
document.body.style.position = 'absolute';
document.body.style.width = '100%';
document.body.style.height = '100%';
footer.classList.add('sticky-footer');
} else {
document.body.style.position = 'initial';
document.body.style.width = 'initial';
document.body.style.height = 'initial';
footer.classList.remove('sticky-footer');
}
}
componentDidMount() {
this.props.history.listen(() => {
this.stickyFooter(document.body.clientHeight > window.innerHeight);
});
}
componentDidUpdate() {
console.log('body: ' + document.body.clientHeight + ' - window: ' + window.innerHeight);
this.stickyFooter(document.body.clientHeight > window.innerHeight);
}
componentWillReceiveProps() {
this.stickyFooter(document.body.clientHeight > window.innerHeight);
}