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

Posted 2023-05-08

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

【英文标题】：Keep header position fixed while scrolling on mobile

【发布时间】：2015-10-19 03:40:53

【问题描述】：

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

但是，当我在移动设备上滚动时，它需要一段时间才能确定我要滚动到的位置。因此，在我停止在移动设备上滚动之前，标题不会固定，然后标题会跳转到应有的位置。

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

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

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

【问题讨论】：

请把你写的代码贴出来，如果没有看到你的代码，通常是不可能回答问题的。

请阅读此内容。 ***.com/questions/15650056/…

对不起@SuperBiasedMan 我没有这样做的唯一原因是因为它只是一个位置固定的标题。没有什么代码可以进一步解释

@GoodOldSnoopy 即使是看起来不错的最小代码也可以为人们提供解决问题的起点，而且由于它很短，因此不会过度占用空间。

谢谢@AlexKante 但position: absolute; 不是我要找的。我希望标题始终固定在视口（屏幕）的顶部，即使在滚动时也是如此。目前，当我在移动设备上滚动时。当我停止滚动时，它会消失然后跳回给我。将其设置为 position: absolute; 无法解决此问题。

【参考方案1】：

我发现position: fixed; 在某些手机上存在很大问题。我认为这是似乎破坏功能的触摸拖动界面。对于某些（通常是较旧的）手机而言，某些固定布局似乎过于复杂，无法理解。

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

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