与位置标头：粘性是萎缩时闪烁在Chrome

Question

我有一个导航元素，下面的一些其他内容，我应该fixed，一旦达到滚动高度。这与position:sticky实现，在所有浏览器工作正常。但我也想尽快，因为它是固定的缩小该元素。

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

如果在浏览器慢慢地滚动（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;

 }