带有位置的粘性导航中的 CLS累积布局移位：固定

问题描述

随着新的 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;
}

有什么想法吗？非常感谢！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

html javascript web-vitals