更改高度时跳动的导航栏（粘性属性）

Question

我遇到了一个不知道如何处理的奇怪问题。

我基本上想在用户开始向下滚动页面时减小导航栏的大小，但由于高度的这种变化，导航栏会产生跳跃效果，如果页面的高度是可用高度的 100% space + 轻微滚动，导航栏有点卡在两种状态之间。问题在底部说明。

我曾尝试在将 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，您可以获得更好的见解。

更改高度时跳动的导航栏（粘性属性）

Jumpy Nav bar upon changing height (sticky property)

javascript

css

sticky

reactjs

更改高度时跳动的导航栏（粘性 属性）

Jumpy Nav bar upon changing height (sticky property)

javascript

css

sticky

reactjs

更改高度时跳动的导航栏（粘性属性）