在移动设备上滚动时，保持标题位置固定

Question

所以我有一个position: fixed; 标头，并且可以在桌面上正常工作。

但是，当我在Mobile上滚动时，要花一点时间才能确定要滚动到的位置。 因此，标题直到我停止在移动设备上滚动才固定，然后标题跳到应有的位置。

任何解决方法或解决方法？

   <div class="mobile-header">
      <a href="#" class="mobile-header-button">Open/close</a>
      <a href="/" class="mobile-header-home">Home</a>
      <ul class="mobile-header-searchbutton">
        <li class="search-button"><a href="/search">Search</a></li>
      </ul>
   </div>

上面是HTML，下面是我的CSS。

.mobile-header {
  display: block;
  background: #fff;
  height: 62px;
  width: 100%;
  float: left;
  position: fixed;
  top: 0;
  right: 0;
  -webkit-transition: left .2s;
  -o-transition: left .2s;
  transition: left .2s;
  z-index: 9999;
}

这是我的位置固定标头。 当我在桌面上滚动时，它是固定的，但是当我在移动设备上滚动时，它落后于滚动。

Answer 1

我找到了position: fixed; 在某些手机上会很成问题。 我认为是触摸拖动界面似乎破坏了功能。 对于某些（通常是较旧的）手机来说，似乎有些固定的布局有点太复杂了。

您可以做的是尝试限制固定的元素数量，并且如果可能的话，仅将这种样式应用于顶级元素，而不是嵌套元素。 fixed的“真实”行为意味着它是否嵌入其他position ed元素中并不重要，但是根据过去的经验，将固定元素嵌套在绝对元素中时遇到了问题。

我将以最简单的形式测试布局，以查看是否可以固定单个元素并首先按预期方式运行。 如果可行，请尝试尽可能简化标题代码。