javascript - header 位置为 :sticky is flickering in chrome when shrinking

Question

我有一个导航元素，在其他一些内容下方，一旦达到滚动高度，我就应该固定。这是通过 position:sticky 实现的，并且在所有浏览器中都可以正常工作。但我也想在该元素修复后立即缩小该元素。

https://codepen.io/arichter83/pen/xMLyOJ

如果在 Chrome(71.0.3578.98 64 位 Mac)上缓慢滚动，此标题会闪烁，因为如果元素正在收缩，window.scrollY 页面的缩小，这使得元素再次变大......来回。 (使用“开始”查看行为)

有什么解决方法吗？

• 以固定高度包裹:这会阻止下面的内容向上移动，这是我想要的。

Answer 1

将位置属性添加到您的 header.minified ID 似乎已停止闪烁。

#header.minified {
  font-size: 24px;
  line-height: 48px;
  height: 48px;
  background: #efc47D;
  text-align: left;
  padding-left: 20px;
  position: fixed;
}