Question

我正在建立一个新的网站，但我遇到了一个简单的任务问题 - 创建一个粘性导航。

它可以在Safari和Chrome中完美运行，也适用于移动浏览器，但不适用于Firefox。

有没有人对可能出错的问题有所了解？

PS。首先在Safari中尝试使用该网站。当你向下滚动abit时会出现导航。

Answer 1

您的<html>采用转换设置样式。这意味着现在所有position: fixed都固定在该元素的框中，而不是视口。因此，当<html>滚动时，#nav_scroll也会滚动。

相关的CSS规则如下所示：

html, html a {
  -webkit-font-smoothing: subpixel-antialiased;
  transform: translate3d(0, 0, 0);
}

请注意，它没有使用-webkit-translate3d，此时基于WebKit / Blink的浏览器是唯一不支持未加前缀的CSS转换的浏览器。因此该规则不会在Chrome或Safari中<html>设置转换，这就是您的网页在那里工作的原因。