改变高度时的跳跃导航栏（粘性）

Question

我有一个奇怪的问题，我不知道如何处理。

当用户开始向下滚动页面时，我基本上想要减小导航栏的大小，但是由于高度的这种变化，导航栏会产生跳跃效果，如果页面的高度是可用的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;
}

Answer 1

我遇到了类似的挑战，我希望将导航从静态位置移动到固定位置。因此导航处于页面上的静态位置，并且一旦用户到达断点，导航将变为固定位置，以使其始终可见并位于屏幕顶部。此外，身高也发生了变化。

我的解决方案，主要问题是整体页面高度的变化，添加一个具有导航精确高度的占位符元素，并在导航变粘后立即显示。

所以解决方案是，只是为了确保整体高度不会改变。

例如，如果您将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，则可以获得更好的见解。