滚动时的粘性导航滞后答案

【问题标题】：Sticky navigation lag on scroll滚动时的粘性导航滞后
【发布时间】：2016-07-31 21:43:50
【问题描述】：

这是我正在开发的网站：Click here - Home Page Scroll Issue。

我正在使用 Foundation 5、粘性滚动条和 Owl Carousel（我尝试过使用 Slick carousel，结果是一样的）。

我遇到的问题是，每当我向上/向下滚动并且顶部栏越过轮播时，整个页面都会卡顿，并且滚动会比预期的轨迹更短地颠簸和停止。

我尝试了很多解决方案，包括将z-index 和-webkit-transform: translateZ(0) 规则应用于轮播，但均未成功。

这个问题在 Firefox 或 Edge 中似乎不存在，或者至少不那么明显。

有什么想法吗？

**更新，Ajay Varghese's 答案似乎有助于向下滚动，但向上滚动时问题仍然存在。当复制下一个内容行以增加页面长度时，如果您尝试向上滚动以显示轮播，它会跳转并产生滚动卡顿。这个问题很烦人，我还是找不到原因。

【问题讨论】：

标签： javascript html google-chrome web scroll

【解决方案1】：

尝试在 .fixed 类中添加overflow: hidden;

.fixed {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 99;
    overflow: hidden;
    left: 0;
}

【讨论】：

在 Chrome 开发者工具中试过，并没有产生任何差异。

【解决方案2】：

我不明白问题是如何发生的。但是我尝试了一些方法并解决了问题。在我删除了您为 .main-content 提供的“margin-top”之后，没有发生跳跃。这将使轮播保持在我们不想要的 .main-content 框上。我通过提供一些额外的高度来解决它，并通过提供“位置：相对”和“顶部：15px”来推动轮播。你能试试这个并告诉我吗？

【讨论】：

谢谢您，但效果不佳。我按照您的建议尝试了以下.main-content { margin-top: 0 } 和.owl-carousel { position: relative; top: 15px; }
这似乎可以解决大屏幕上的问题，因为滚动会变短，但是如果您在开发者工具中复制下面的行，您会看到滚动轮播仍然会产生滚动凸起.
我刚刚删除了margin-top，它似乎工作。我在 chrome、ubuntu 操作系统中尝试过。在 MAC 中也进行了测试。在那里我没有改变任何东西，也没有解决问题。
如果您从上到下滚动，它似乎确实可以解决问题。但是，如果您尝试复制下面的行并尝试相同的操作但从下到上滚动，您将看到滚动再次碰撞和闪烁。这意味着一旦页面中添加了更多内容，滚动就不会流畅

【解决方案3】：

此问题仅存在于 Chrome 中。问题似乎是 WebKit 有时不能很好地处理分层。

以下是最适合我的解决方案： body { -webkit-transform: translate3d(0, 0, 0);}

希望这可以帮助某人并节省他们宝贵的时间。

**更新，我没有意识到这会破坏粘性顶栏。因此，这种方案是不可行的。

【讨论】：