在 Safari 中快速滚动时基础粘性导航跳转

Question

我注意到当我在 Safari 中快速向上滚动时，粘性导航会跳来跳去，然后我必须再次缓慢滚动才能让它点击回到正确的位置。我正在使用 Foundation 6。此外，这是一个新问题，因为过去在 Safari 中一切正常，但在过去 4 个月左右的时间里肯定发生了一些变化。请参阅下面的问题示例。

这是导航栏的 HTML。我没有对 CSS.

做任何特别的事情

<nav class="top-bar-container hide-for-small-only" data-sticky-container>
  <div class="sticky sticky-topbar" data-sticky data-options="anchor: page; marginTop: 0; stickyOn: small;">
    <div class="top-bar">
      <div class="wrap">
        <div class="top-bar-left">
          <ul class="menu menu-hover-lines" data-magellan>
            <li><a class="menu-options" href="home">Home</a></li>
            <li><a class="menu-options" href="projects">Projects</a></li>
            <li><a class="menu-options" href="articles">Articles</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</nav>

该问题仅在 Safari 中出现。 Chrome，等等，一切正常。有没有其他人有这个问题？感谢任何帮助。

Answer 1

有同样的问题。我在 body 标签中添加了一个 id，然后将顶部容器锚定到它。

<body id="the-body">

<div data-sticky-container>
  <div data-sticky data-margin-top="0" data-top-anchor="the-body:top" data-stick-on="small">
  <div class="top-bar topbar-sticky-shrink" id="top-menu">
    <div class="top-bar-title">
      NAME
    </div>
    <div class="top-bar-right">
      <ul class="menu" data-magellan>
        <li><a href="#first">FIRST</a></li>
        <li><a href="#second">SECOND</a></li>
        <li><a href="#third">THIRD</a></li>
      </ul>
    </div>
  </div>
</div>
</div>

在 Safari 中快速滚动时基础粘性导航跳转

Foundation sticky nav jumps when scrolling fast in Safari

html

css

zurb-foundation