Question

我一整天都在弄乱这个，似乎无法找到解决办法。

我有一个简单的ul作为固定标头，带有以下css：

body {
  width: 100%;
  height: 100%;
  min-height: 100%;       
}

.stream .header {
     position: fixed;
     width: 100%;
     height: 41px;
     top: 0;
     right: 0;
     left: 0;
     z-index: 10;
     margin-bottom: 10px;
     list-style: none;
   }

标题下方的内容包含以下css：

.stream .stream-content {
  position: relative;
  padding-top: 41px;
  -webkit-transform: translate3d(0, 0, 0);
}

在ios7 mobile safari中滚动页面时，会发生以下情况：

首先向下滚动 - 标题随着页面顶部移动一直移动，直到滚动完成。
第二次向下滚动 - 标题完全消失，滚动完成后不会重新出现。
向上滚动（标题仍然可见） - 标题完全消失，并且在到达页面顶部时不再出现。
向上滚动（标题隐藏） - 标题保持隐藏状态，并且在到达页面顶部时不会重新出现。
向上滚动（已经在页面顶部隐藏了标题） - 标题重新出现并正常运行，直到页面向下滚动两次。

我在iOS6移动游戏中没有遇到这个问题，所以问题似乎与滚动时调整大小的新网址有关。

其他有类似问题的人？建议欢迎。

更新

因此，在标头的父（.stream）上删除-webkit-transform3d（）似乎会消除问题，因此必须存在与父div呈现方式和内部标头的冲突。

仍然在找工作。

Answer 1

我遇到了同样的问题，它似乎是一个错误，当页面内部发生太多事情时，我可以通过将以下转换代码添加到固定位置元素来修复它，（{{ 1}}）强制浏览器使用硬件加速来访问设备的图形处理单元（GPU）以使像素飞行。另一方面，Web应用程序在浏览器的上下文中运行，这使得软件可以完成大部分（如果不是全部）渲染，从而减少了转换的马力。但是Web一直在追赶，大多数浏览器厂商现在通过特定的CSS规则提供图形硬件加速。

使用-webkit-transform：translate3d（0,0,0）;将使GPU转换为CSS转换的动作，使它们更平滑（更高的FPS）。

注意： translate3d（0,0,0）在您看到的内容方面没有任何效果。它在x，y和z轴上移动对象0px。它只是一种强制硬件加速的技术。

transform: translateZ(0);-webkit-transform: translateZ(0);

Answer 2

当浏览器没有及时重新绘制元素时会发生这种情况，因此，它似乎会消失，然后在滚动时重新出现。

如果上述答案对您不起作用，请在元素上使用无限css动画;强制浏览器不断重新绘制元素。

这里是代码！

@keyframes repaint {
  from {
    width: 99.999%
  }
  to {
    width: 100%;
  }
}


.positionsticky {
    animation: repaint 1ms;
  animation-iteration-count: infinite;
}

Answer 3

我在iPhone SE上遇到了这个问题。尝试了-webkit-transform：translateZ（0）;把戏，但这没有帮助。我想移动的元素位于第一个滚动的底部，我希望它获得位置：用户滚动到它后的固定状态（使用js解决）。在其他地方都可以使用，但是在SE上，元素消失了。出于某种原因，它在设置top：0之后将元素移出了屏幕，为我解决了这个问题。

.sticky_menu {
   position: fixed;
   top: 0;
}

Answer 4

6年后，这仍然是一个问题...我使用CSS transform尝试了各种建议，但是没有用。我发现的唯一稳定的解决方案是在元素中添加ID和id，然后使用scrollIntoView()。

该场景是一个页面，页面顶部和底部滚动。当用户滚动到底部时，顶部消失。当用户向后滚动op时，它不容易重新出现。另外，如果设备很小，并且要填充文本字段，则当该字段聚焦时，顶部会消失。

我通过给top元素一个像'topbar'这样的id来解决它，然后在情况需要时使用scrollIntoView（）。我为此写了一个小函数：

function topbarIntoView() {
  var dom = document.querySelector("#topbar");
  if (dom) {
    dom.scrollIntoView({ behavior: 'smooth', block: 'start' })
  }
}

Answer 5

我遇到了与iPad相同的问题。我尝试在JS部分为iPad添加代码：

if(navigator.userAgent.match(/iPad/i)) {
    //written code to scrolldown the header part
}

它对我有用。

在ios7手机游戏中消失的位置固定标题

5 个答案: