标头所在位置：收缩时粘性在铬中闪烁

Question

我有一个导航元素 ，在其他一些内容下，一旦达到滚动高度，就应该对其进行fixed 。 这是通过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;

 }