Блог

Главная - Вопросы по программированию - Базовая липкая навигация прыгает при быстрой прокрутке в Safari

Базовая липкая навигация прыгает при быстрой прокрутке в Safari

#html #css #foundation

#HTML #css — код #zurb-фундамент

Вопрос:

Я заметил, что когда я быстро прокручиваю вверх в 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 и т.д. все работает нормально. У кого-нибудь еще была такая проблема? Любая помощь приветствуется.

Комментарии:

1. Пожалуйста, поделитесь полным кодом. как вы можете видеть здесь, в предоставленном вами коде нет никаких проблем: codepen.io/manaskhandelwal1/pen/LYRJLwd

Ответ №1:

У меня была та же проблема. Я добавил идентификатор к тегу body, а затем привязал к нему верхний контейнер.

 <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>