问题描述
随着新的 Web Vitals 传入，我的粘性导航/菜单出现问题。事实上，大多数页面都会有:-(
问题是我使用了一种类似 bootstrap 词缀的方法来使菜单在离开视口时具有粘性。但是每次菜单离开视口（并进入它）并且位置从 relative/static/absolute 设置为 fixed 时，它会增加 CLS（累积布局偏移）。我意识到将位置更改为 fixed 会导致布局偏移，因为元素会从图层中移除，并且所有后续元素都将移至顶部。
但是：这就是我想出一些解决方案的原因，我认为最好的方法是在菜单周围使用具有特定高度的包装器。因此，当菜单的位置更改为固定时，包装器仍然存在并且位置或高度不会改变，这意味着没有后续元素必须移动。但 CLS 仍在计数。而且我不知道该怎么做才能使我的菜单保持粘性而不影响很重要的 CLS。顺便说一句，由于浏览器支持不足，我无法使用 position:sticky。因为我的研究是正确的 position: sticky 工作而不会对 CLS 产生负面影响，所以我的解决方案没有，尽管用户 ** 根本看不到任何区别 **....
这里提供了一些伪代码，以便更直观：
...
<body>
<h1>
Headline
</h1>
<p>
Here is some elements an stuff
</p>
<div class="menu-wrapper">
<div class="menu">
<ul>...........</ul>
</div>
</div>
<p>
More elements and stuff. nothing shifting because the wrapper always has the same height.
</p>
...
</body>
...
.menu-wrapper {
height: 60px;
width: 100%;
}
.menu {
height: 60px;
width: 100%;
position: static;
}
.menu.affix {
position: fixed;
top: 0;
}
有什么想法吗？非常感谢！
解决方法
这可能会在 Chrome Canary 90 中修复。
上下文：CLS 更改日志报告了这方面的一些改进：https://chromium.googlesource.com/chromium/src/+/master/docs/speed/metrics_changelog/cls.md：
累积布局变更日志
这是对 Cumulative Layout Shift 的更改列表。
- 指标定义改进：Bug fixes involving changes to transform,effect,clip or position
- 指标定义改进：Consider transform change countering layout shift。
同一页面上列出的来自 Chrome 89 的其他修复也可能适用。