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

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;
}

如果您在切换scrolled 的状态时放置一些console.log，您可以获得更好的见解。