尽管CSS属性{position:fixed;}似乎（主要）在较新的iOS设备上起作用，但有时可能会导致设备怪异并回退，{position:relative;}而没有任何原因或原因。通常，清除缓存将有所帮助，直到发生某些情况并且再次出现怪癖。
具体来说，从Apple本身为iPad准备您的Web内容：
iPad上的Safari和iPhone上的Safari没有可调整大小的窗口。在iPhone和iPad上的Safari中，窗口大小设置为屏幕大小（减去Safari用户界面控件），并且用户无法更改。要在网页上四处移动，用户在双击或捏合以放大或缩小时，或者通过触摸并拖动以平移页面时，可以更改视口的缩放级别和位置。当用户更改视口的缩放级别和位置时，他们正在固定大小的可见内容区域（即窗口）内进行操作。这意味着将其位置“固定”到视口的网页元素可以最终显示在屏幕外的可见内容区域之外。
具有讽刺意味的是，Android设备似乎没有此问题。同样，完全有可能{position:absolute;}在参考body标签时使用并且没有任何问题。
我发现了这个怪癖的根本原因。与HTML或BODY标记一起使用时，滚动事件不能很好地发挥作用。有时它不喜欢触发该事件，或者您必须等到滚动摆动事件结束才能接收该事件。具体来说，在此事件结束时将重新绘制视口，并且可以将固定元素重新放置在视口中的其他位置。
所以这就是我要做的：（避免使用视口，并坚持使用DOM！）
<html>
<style>
.fixed{
position:fixed;
/*you can set your other static attributes here too*/
/*like height and width, margin, etc.*/
}
.scrollableDiv{
position:relative;
overflow-y:scroll;
/*all children will scroll within this like the body normally would.*/
}
.viewportSizedBody{
position:relative;
overflow:hidden;
/*this will prevent the body page itself from scrolling.*/
}
</style>
<body class="viewportSizedBody">
<div id="myFixedContainer" class="fixed">
This part is fixed.
</div>
<div id="myScrollableBody" class="scrollableDiv">
This part is scrollable.
</div>
</body>
<script type="text/javascript" src="{your path to jquery}/jquery-1.7.2.min.js"></script>
<script>
var theViewportHeight=$(window).height();
$('.viewportSizedBody').css('height',theViewportHeight);
$('#myScrollableBody').css('height',theViewportHeight);
</script>
</html>
本质上，这将导致BODY成为视口的大小并且不可滚动。嵌套在内部的可滚动DIV会像通常的BODY一样滚动（减去摆动效果，因此滚动不会在触摸端停止。）固定的DIV保持固定而不会产生干扰。
附带说明一下，z-index固定DIV 的高值对于保持可滚动DIV似乎在它后面很重要。我通常会添加窗口大小调整和滚动事件，以实现跨浏览器和备用屏幕分辨率的兼容性。
如果所有其他方法均失败，则上面的代码也将在固定DIV和滚动DIV设置为的情况下工作{position:absolute;}。