Javascript 位置：固定的粘性导航中的CLS（累积布局移位）
随着新的网络重要信息的到来，我的粘性导航/菜单出现了问题。事实上，大多数页面都有：- 问题是，当菜单离开视口时，我使用了一种类似于引导粘贴的方法来使其粘滞。但每次菜单离开视口并同时进入视口，并且位置从相对/静态/绝对设置为固定时，都会增加CLS累积布局偏移。我意识到，将位置更改为“固定”将导致布局移动，因为元素从层中移除，并且所有后续元素都将移动到顶部 但是：这就是为什么我想出了一些解决方案，我认为最好的办法是在菜单周围使用一个特定高度的包装。因此，当菜单的位置更改为“固定”时，包装器仍然存在，并且位置或高度不变，这意味着不需要移动以下元素。但CLS仍在计算中。我不知道该怎么做才能在不影响CLS的情况下使我的菜单保持粘性，这一点很重要。顺便说一句，我不能使用位置：sticky，因为没有足够的浏览器支持。因为我认为我的建议是正确的：粘性工作不会对CLS产生负面影响，所以我的解决方案不会，尽管用户**根本看不到任何区别** 下面是一些更直观的伪代码：Javascript 位置：固定的粘性导航中的CLS（累积布局移位）,javascript,html,css,web-vitals,Javascript,Html,Css,Web Vitals,随着新的网络重要信息的到来，我的粘性导航/菜单出现了问题。事实上，大多数页面都有：- 问题是，当菜单离开视口时，我使用了一种类似于引导粘贴的方法来使其粘滞。但每次菜单离开视口并同时进入视口，并且位置从相对/静态/绝对设置为固定时，都会增加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>
...
有什么想法吗？多谢各位 这可能固定在铬金丝雀90中 上下文：CLS更改日志报告了这方面的几项改进： 累积布局班次变更日志 这是对的更改列表 度量定义改进： 度量定义改进：。
同一页上列出的Chrome 89的其他修复也可能适用。这可能在Chrome Canary 90中修复 上下文：CLS更改日志报告了这方面的几项改进： 累积布局班次变更日志 这是对的更改列表 度量定义改进： 度量定义改进：。
同一页面上列出的Chrome 89的其他修复程序也可能适用。欢迎链接到解决方案，但请确保您的答案在没有它的情况下是有用的：这样您的其他用户就会知道它是什么以及为什么存在，然后引用您链接到的页面的最相关部分，以防目标页面不可用。欢迎链接到某个解决方案，但请确保您的答案在没有它的情况下是有用的：这样您的其他用户就会知道它是什么以及为什么存在，然后引用您链接到的页面的最相关部分，以防目标页面不可用。在添加固定类之前和之后，当我尝试使用位置固定标题时，我遇到了相同的问题，但我的包装器具有相同的高度。被触发的脉冲电流。等待修复：在添加fixed类之前和之后，当我尝试但我的包装器具有相同的高度时，我的位置固定标题也有相同的问题。被触发的脉冲电流。正在等待修复：
.menu-wrapper {
height: 60px;
width: 100%;
}
.menu {
height: 60px;
width: 100%;
position: static;
}
.menu.affix {
position: fixed;
top: 0;
}