javascript - 带有位置的标题：sticky 在收缩时在 chrome 中闪烁

Question

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

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

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

有什么解决方法吗？

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

标签： javascripthtmlcssgoogle-chromesticky

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