2

随着新的网络生命体征的到来，我的粘性导航/菜单出现了问题。事实上，大多数页面都会有:-(

问题是我使用了一种像引导词缀这样的方法来使菜单在离开视口时具有粘性。但是每次菜单离开视口（并进入它）并且位置设置从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;
}

有任何想法吗？非常感谢！

4

1 回答 1

3

这可能会在 Chrome Canary 90 中修复。

上下文：CLS 更改日志报告了这方面的一些改进：https ://chromium.googlesource.com/chromium/src/+/master/docs/speed/metrics_changelog/cls.md ：

累积布局转变变更日志

这是对Cumulative Layout Shift的更改列表。

同一页面上列出的 Chrome 89 中的其他修复也可能适用。

于 2021-02-23T16:23:19.220 回答