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

Posted 2023-02-22

【中文标题】带有位置的标题：sticky 在收缩时在 chrome 中闪烁

【英文标题】：Header with position:sticky is flickering in chrome when shrinking

【发布时间】：2019-06-29 07:22:13

【问题描述】：

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

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

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

有什么解决方法吗？

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

【参考方案1】：

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

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

【讨论】：

确实它解决了所描述的问题，但它还有另外两个问题：1.）标题后面的内容向上移动，请参见此处：codepen.io/arichter83/pen/jdLRxP（可以使用新的间隔元素修复） 2.）在我的现实生活示例中，标题 div 没有 100% 的宽度，但相对于父元素的尺寸（我可以手动修复）