位置：固定在iPad和iPhone上不起作用
我一直在固定定位在iPad上挣扎。 我知道iScroll ，它似乎并不总是工作（即使在他们的演示）。 我也知道Sencha有一个解决scheme，但我不能Ctrl + F的修复程序的源代码。
我希望有人可能有解决办法。 问题在于，当用户在iOS移动Safari上向下/向上移动时，固定的定位元素不会得到更新。
很多手机浏览器故意不支持position:fixed; 理由是固定的元素可能会挡在小屏幕上。
Quirksmode.org网站有一个很好的博客文章解释了这个问题： http : //www.quirksmode.org/blog/archives/2010/12/the_fifth_posit.html
另请参阅此页面以获取显示哪些移动浏览器支持position:fixed;的兼容性图表position:fixed; ： http : //www.quirksmode.org/m/css.html
（但是请注意，手机浏览器世界正在迅速发展，所以这样的表格可能不会保持最新状态！）
更新：iOS 5和Android 4都报告有立场：固定支持。
我今天在一家苹果商店自己testing了iOS 5，并且可以确认它的位置是固定的。 尽pipe放大和平移固定元素存在问题。
我发现这个兼容性表格比quirksmode版本更新和更有用： http : //caniuse.com/#search=fixed
它具有Android，Opera（迷你和移动）和iOS的最新信息。
固定定位在iOS上不起作用，就像在电脑上一样。
想象一下你在放大镜（视口）下面有一张纸（网页），如果你移动放大镜和你的眼睛，你会看到页面的不同部分。 这是iOS的工作原理。
现在有一张清晰的塑料，上面写着一个字，这张塑料不pipe什么（位置：固定元件）都保持静止。 所以当你移动放大镜时，固定的元件看起来会移动。
或者，不用移动放大镜，而是移动纸张（网页），保持塑料片和放大镜的静止。 在这种情况下，塑料板上的单词将保持固定，其余内容将会移动（因为它实际上是）这是一个传统的桌面浏览器。
因此，在iOS中，视口移动，在传统的浏览器中，网页移动。 在这两种情况下，固定的元素都保持现实。 尽pipe在iOS上，固定元素似乎在移动。
解决这个问题的方法是遵循本文的最后几段
（基本上禁止滚动，在一个单独的滚动div（见链接文章顶部的蓝色框）中的内容，和固定的元素绝对定位）
“position：fixed”现在可以像iOS5中预期的那样工作了。
位置：固定可以在android / iphone上进行垂直滚动。 但是你需要确保你的元标签是完全设置的。 例如
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
另外，如果你打算在android 4.0以前使用同一个页面，那么你也需要设置最高的位置，或者由于某种原因会增加一个小的边距。
现在苹果支持
overflow:hidden; -webkit-overflow-scrolling:touch;
固定页脚（这里用jQuery）：
if (navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod' || navigator.platform == 'Linux armv6l') { window.ontouchstart = function () { $("#fixedDiv").css("display", "none"); } window.onscroll = function() { var iPadPosition = window.innerHeight + window.pageYOffset-45; // 45 is the height of the Footer $("#fixedDiv").css("position", "absolute"); $("#fixedDiv").css("top", iPadPosition); $("#fixedDiv").css("display", "block"); } } // in the CSS file should stand: #fixedDiv {position: fixed; bottom: 0; height: 45px; whatever else}
希望能帮助到你。
避免在同一个盒子上使用transform：—和position：fixed。 元素将保持原状：如果有任何变换，则为静态。
我结束了使用新的jQuery Mobile v1.1： http : //jquerymobile.com/blog/2012/04/13/announcing-jquery-mobile-1-1-0/
我们现在有一个稳定的重写，在许多stream行的平台上提供了真正的固定工具栏，并安全地回退到其他浏览器中的静态工具栏定位。
关于这种方法最酷的部分是，不像基于JS的解决scheme，在所有平台上施加了不自然的滚动物理，我们的滚动感觉是100％原生的，因为它是 。 这意味着，滚动感到无处不在，并与触摸，鼠标滚轮和键盘用户input。 作为奖励，我们基于CSS的解决scheme超级轻量，不会影响兼容性或可访问性。
使用jquery我能够拿出这个。 它不滚动光滑，但它的窍门。 你可以向下滚动，固定的div在顶部popup。
CSS
<style type="text/css"> .btn_cardDetailsPg {height:5px !important;margin-top:-20px;} html, body {overflow-x:hidden;overflow-y:auto;} #lockDiv { background-color: #fff; color: #000; float:left; -moz-box-shadow: 0px 4px 2px 2px #ccc;-webkit-box-shadow: 0px 4px 2px 2px #ccc;box-shadow:0px 4px 2px 2px #ccc; } #lockDiv.stick { position: fixed; top: 0; z-index: 10000; margin-left:0px; } </style>
HTML
<div id="lockSticky"></div> <div id="lockDiv">fooo</div>
jQUERY
<script type="text/javascript"> function sticky_relocate() { var window_top = $(window).scrollTop(); var div_top = $('#lockSticky').offset().top; if (window_top > div_top) $('#lockDiv').addClass('stick') else $('#lockDiv').removeClass('stick'); } $(function() { $(window).scroll(sticky_relocate); sticky_relocate(); }); </script>
最后，我们要确定，如果iPod在横向或纵向模式触摸相应地显示
<script type="text/javascript"> if (navigator.userAgent.match(/like Mac OS X/i)) { window.onscroll = function() { if (window.innerWidth > window.innerHeight) { //alert("landscape [ ]"); document.getElementById('lockDiv').style.top = (window.pageYOffset + window.innerHeight - 268) + 'px'; } if (window.innerHeight > window.innerWidth) { //alert("portrait ||"); document.getElementById('lockDiv').style.top = (window.pageYOffset + window.innerHeight - 418) + 'px'; } }; } </script>
即使CSS属性{position:fixed;}似乎（大部分）在较新的iOS设备上工作，有时也有可能使设备偏离和回退到{position:relative;} ，无缘无故。 通常清除caching将有所帮助，直到发生什么事情，并再次发生怪癖。
具体来说，从苹果本身为iPad准备您的Web内容 ：
iPad上的Safari和iPhone上的Safari没有可resize的窗口。 在iPhone和iPad的Safari上，窗口大小设置为屏幕大小（减去Safari用户界面控件），用户无法更改。 要在网页中移动，用户可以双击或缩放以放大或缩小视图，或通过触摸并拖动以平移页面来更改视口的缩放级别和位置。 当用户在固定大小的可视内容区域（即，窗口）内更改视口的缩放级别和位置时，他们正在这样做。 这意味着，将其位置“固定”到视口的网页元素可以在可视内容区域之外，离屏。
什么是讽刺，Android设备似乎没有这个问题。 在引用body标签时也可以使用{position:absolute;} ，而且没有任何问题。
我发现这个怪癖的根源， 当与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保持固定而不受干扰。
作为一个方面说明，固定DIV上的高z-index值z-index对于保持可滚动DIV看起来很重要。 我通常添加窗口resize和滚动事件也为跨浏览器和备用屏幕分辨率兼容性。
如果一切都失败了，上面的代码也可以将固定的和可滚动的DIV设置为{position:absolute;} 。
在我的情况下，滚动显示的position: fixed元素，最初并没有显示添加到DOM。 所以我只是手动触发滚动事件，这反过来引发了重绘和瞧。
window.scrollTo(window.scrollX, window.scrollY);
这是我的解决scheme…
CSS
#bgimg_top { background: url(images/bg.jpg) no-repeat 50% 0%; position: fixed; top:0; left: 0; right:0 ; bottom:0; }
HTML
<body> <div id="bgimg_top"></div> .... </body>
解释是为div固定的位置将div始终保持在背景上，然后使用（左，右，上，下）伸展div来浏览器的所有angular落（提供body margin = 0） ） 同时。
请确保您不使用宽度和高度，因为这将覆盖顶部，左侧，右侧，底部选项。
