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元素中无关紧要，但从过去的经验来看，我将固定元素嵌套在绝对元素中时遇到了问题。 / p>

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

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

1 个答案: