Реагировать - динамический липкий нижний колонтитул

Я хочу сделать нижний колонтитул липким или не основанным на том, если высота тела больше, чем высота окна.
Когда я меняю страницу, я получаю неправильный рост, который был бы на той странице, на которой я был раньше.
У меня есть маршрут (/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);
}

0 ответов

Другие вопросы по тегам