Jumpy Nav бар при изменении высоты (липкое свойство) - PullRequest
Новая
       7

Jumpy Nav бар при изменении высоты (липкое свойство)

0 голосов
/ 21 мая 2018

У меня странная проблема, с которой я не знаю, как справиться.

Я в основном хочу уменьшить размер моей панели навигации, когда пользователь начинает прокручивать страницу вниз, но из-за этого изменения высоты панель навигации создает эффект скачка, и если высота страницы составляет 100% доступного пространства+ небольшая прокрутка, навигационная панель застревает между двумя состояниями.Проблема проиллюстрирована внизу.

Я попытался программно прокрутить страницу перед установкой состояния scrolled в true, чтобы предотвратить изменение размера панели навигации, но это было ужасно.

Это мой window.onscrollсобытие: 

  handleScroll = () => {
    const { scrolled } = this.state;
    console.log(window.scrollY, window.pageYOffset);
    if (window.pageYOffset >= 10 && !scrolled) {
      this.setState({ scrolled: true });
    } else if (window.pageYOffset == 0 && scrolled) {
      this.setState({ scrolled: false });
    }
  };

и это мой css: 

nav {
  height: 150px;
  background: black;
  color: white;
  transition: all 0.2s ease-in;
  position: sticky;
}

nav.scrolled {
  height: 80px;
}

enter image description here

1 Ответ

0 голосов
/ 21 мая 2018

У меня была похожая проблема, когда я хотел переместить навигацию из статического положения в фиксированное.Таким образом, навигация находится на статической позиции на странице, и как только пользователь достигнет точки останова, навигация изменится на фиксированную позицию, чтобы она всегда была видна и находилась в верхней части экрана.еще больше, высота тоже изменилась.

решение, которое у меня было для этого, так как основная проблема заключается в изменении общей высоты страницы, чтобы добавить элемент-заполнитель с точной высотой навигации и показать его, как только навигация станет липкой.

Таким образом, решение состоит только в том, чтобы гарантировать, что общая высота не изменяется.

Например, если вы измените свой CSS на этот, вы не должны видеть этот эффект (не мое предлагаемое решение!), Так как вы не изменили бы общую высоту, и, следовательно, вы не задействовали бы несколько прокруток.и вопросы повторного рендеринга: 

nav {
  height: 150px;
  padding-bottom: 0;
  background: black;
  color: white;
  transition: all 0.2s ease-in;
  position: sticky;
}

nav.scrolled {
  height: 80px;
  padding-bottom: 70px;
}

вы могли бы получить лучшее понимание, если бы поместили немного console.log при переключении состояния scrolled.

...