在移动Safari中的固定位置
移动Safari中可以定位相对于视口固定的元素吗？ 正如很多人所指出的， position: fixed不起作用，但是Gmail刚刚提出了一个几乎就是我想要的解决scheme – 查看消息视图上的浮动菜单栏。
在JavaScript中获取实时滚动事件也是一个合理的解决scheme。
iOS 5 支持position：fixed 。
这个固定的位置div可以用两行代码来实现，它将滚动的div移动到页面的底部。
window.onscroll = function() { document.getElementById('fixedDiv').style.top = (window.pageYOffset + window.innerHeight - 25) + 'px'; };
看到谷歌解决这个问题 。 你基本上必须使用JavaScript自己滚动内容。 Sencha Touch还提供了一个在一个非常高性能的庄园获得这种行为的图书馆。
它为我工作：
function changeFooterPosition() { $('.footer-menu').css('top', window.innerHeight + window.scrollY - 44 + "px"); } $(document).bind('scroll', function() { changeFooterPosition(); });
（44是我的酒吧的高度）
虽然栏只在滚动结束时移动…
这可能会让你感兴趣。 这是苹果开发的支持页面。
http://developer.apple.com/library/ios/#technotes/tn2010/tn2262/
阅读“ 4.修改依赖于CSS固定位置的代码 ”这一点，你会发现苹果有意识地决定把固定位置作为静态来处理。
我认为gmail只是跟踪定时器上的滚动位置，并相应地重新定位div 。
我看到的最好的解决办法是在doctyper 。
一个简单的jQuery解决scheme，可以移动一个元素： 链接
你可以尝试使用触摸滚动，一个jQuery插件，模仿移动Safari上的固定元素的滚动： https ： //github.com/neave/touch-scroll
在http://neave.github.com/touch-scroll/上查看您的iOS设备示例;
或者另一个select是iScroll： http ://cubiq.org/iscroll
我刚才发现这个： http : //doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/
（这个问题也在Googlesearch结果中。）
（对不起necrobump）
我发现了浮动酒吧的Gmail解决scheme。
http://googlecode.blogspot.com/2009/09/gmail-for-mobile-html5-series-css.html
这是我做到的。 一旦你向下滚动页面，就会有一个低于标题的导航块，它会“粘”到窗口的顶部。 如果您滚动回顶端，那么nav就会返回到我使用的位置：固定在非移动平台和iOS5的CSS中。 其他移动版本确实有“滞后”，直到屏幕停止滚动之前，设置。
// css #sticky.stick { width:100%; height:50px; position: fixed; top: 0; z-index: 1; } // jquery //sticky nav function sticky_relocate() { var window_top = $(window).scrollTop(); var div_top = $('#sticky-anchor').offset().top; if (window_top > div_top) $('#sticky').addClass('stick'); else $('#sticky').removeClass('stick'); } $(window).scroll(function(event){ // sticky nav css NON mobile way sticky_relocate(); var st = $(this).scrollTop(); // sticky nav iPhone android mobile way iOS<5 if (navigator.userAgent.match(/OS 5(_\d)+ like Mac OS X/i)) { //do nothing uses sticky_relocate() css } else if ( navigator.userAgent.match(/(iPod|iPhone|iPad)/i) || navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) ) { var window_top = $(window).scrollTop(); var div_top = $('#sticky-anchor').offset().top; if (window_top > div_top) { $('#sticky').css({'top' : st , 'position' : 'absolute' }); } else { $('#sticky').css({'top' : 'auto' }); } };
<meta name="viewport" content="width=320, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
此外，请确保height=device-height不存在于此元标记中，有助于防止页面上通常不存在的额外页脚填充。 菜单栏高度增加了视口高度，导致固定的背景变成可滚动的。
在这里你可以看到（移动）浏览器支持的CSS位置固定+有版本。
我们的web应用程序需要一个固定的标题 我们很幸运，因为我们只需要支持最新的浏览器，但Safari在这个领域的行为给我们带来了一个真正的问题。
正如其他人所指出的，最好的解决办法是编写我们自己的滚动代码。 但是，我们不能certificate这一努力可以解决仅在iOS上发生的问题。 希望苹果能够解决这个问题更有意义，特别是因为，正如QuirksMode所言，苹果现在独自对“立场：固定”的解释。
http://www.quirksmode.org/blog/archives/2013/12/position_fixed_1.html
我们的工作是根据用户是否放大来在“position：fixed”和“position：absolute”之间切换。 这用可预测的行为来替代我们的“浮动”头，这对可用性是重要的。 放大时，行为不是我们想要的，但用户可以通过反转缩放来轻松解决此问题。
// On iOS, "position: fixed;" is not supported when zoomed, so toggle "position: absolute;". header = document.createElement( "HEADER" ); document.body.appendChild( header ); if( navigator.userAgent.match( /iPad/i ) || navigator.userAgent.match( /iPhone/i )) { addEventListener( document.body, function( event ) { var zoomLevel = (( Math.abs( window.orientation ) === 90 ) ? screen.height : screen.width ) / window.innerWidth; header.style.position = ( zoomLevel > 1 ) ? "absolute" : "fixed"; }); }
