【发布时间】：2020-12-30 10:26:10
【问题描述】：
随着新的 Web Vitals 传入，我的粘性导航/菜单出现问题。事实上大多数页面都会有:-(
问题是我使用了一种像引导词缀这样的方法来使菜单在离开视口时保持粘性。但是每次菜单离开视口（并进入视口）并且位置从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;
}
有什么想法吗？非常感谢！
【问题讨论】：
-
我在尝试使用位置固定标头时遇到了同样的问题，但我的包装器在添加固定类之前和之后的高度相同。 Иut CLS 被触发。等待修复:)
标签： javascript html css web-vitals