【发布时间】：2009-04-13 05:42:38
【问题描述】：
是否可以在 Mobile Safari 中定位相对于视口固定的元素？正如许多人所指出的，position: fixed 不起作用，但 Gmail 刚刚推出了一个几乎是我想要的解决方案 - 请参阅消息视图上的浮动菜单栏。
在 JavaScript 中获取实时滚动事件也是一个合理的解决方案。
【问题讨论】：
标签： javascript iphone css mobile-safari
【发布时间】：2009-04-13 05:42:38
【问题描述】：
这个固定位置的 div 只需 2 行代码就可以实现，将滚动时的 div 移动到页面底部。
window.onscroll = function() {
document.getElementById('fixedDiv').style.top =
(window.pageYOffset + window.innerHeight - 25) + 'px';
};
【讨论】：
-
这不是有点延迟吗？
-
onscroll 直到 滚动完成后才会触发，因此该元素会随着页面滚动，然后在滚动完成时捕捉到底部。
-
此外，移动版 Safari 现在支持硬件加速转换。所以 element.style.webkitTransform = "translate3d(0, " + window.pageYOffset + "px, 0)";实际上会比设置最高值执行得更快、更不稳定。
-
@Adam：不知道为什么，但这对我不起作用。该元素根本没有出现。之前有
position:fixed;top:50%;left:50%;。
iOS 5 有support for position:fixed。
【讨论】：
-
今天早上看到了。终于！
-
其他不支持 iOS 的移动设备呢？
-
为什么这是公认的答案？仍然有很多用户使用较低版本的 iOS，原因之一是缺少对那里设备的支持..
-
@NickGreen - 因为它适用于 iOS 5，我们希望用户将他们的旧设备扔进垃圾箱，这与 Apple 相关，因为大多数软件不适用于旧手机。跨度>
-
如果您在 IOS 5.1.1（或更早版本）中使用 position:fixed，您可能会陷入痛苦的世界。是马车。非常有问题。
见Google's solution to this problem。您基本上必须使用 JavaScript 自己滚动内容。 Sencha Touch 还提供了一个库，用于在非常高效的庄园中获取此行为。
【讨论】：
它对我有用：
function changeFooterPosition() {
$('.footer-menu').css('top', window.innerHeight + window.scrollY - 44 + "px");
}
$(document).bind('scroll', function() {
changeFooterPosition();
});
（44是我酒吧的高度）
虽然条形图只在滚动结束时移动...
【讨论】：
这可能会让您感兴趣。这是 Apple Dev 支持页面。
http://developer.apple.com/library/ios/#technotes/tn2010/tn2262/
阅读“4. 修改依赖 CSS 固定定位的代码”这一点，你会发现 Apple 有意识地决定将固定位置处理为静态是有充分理由的。
【讨论】：
-
该链接没有给出“非常好的理由”。所尝试的只是对当前情况的描述。
您可以尝试使用 touch-scroll，这是一个 jQuery 插件，可以模拟移动 Safari 上固定元素的滚动：https://github.com/neave/touch-scroll
在http://neave.github.com/touch-scroll/查看使用您的 iOS 设备的示例
或者替代方案是 iScroll：http://cubiq.org/iscroll
【讨论】：
-
我都用过。两者都运作良好。如果您需要的不仅仅是滚动控制（即固定定位），iScroll 4 会更彻底。Touch Scroll 有限且更小。
我就是这样做的。 向下滚动页面后，我在标题下方有一个导航块，它“粘”到窗口顶部。 如果您滚动回顶部，导航会回到原来的位置 我在非移动平台和 iOS5 的 CSS 中使用 position:fixed。 其他移动版本确实存在“延迟”，直到屏幕在设置之前停止滚动。
// 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 position fixed + there version。
【讨论】：
我们的网络应用需要一个固定的标头。幸运的是，我们只需要支持最新的浏览器，但 Safari 在这方面的行为给我们带来了真正的问题。
正如其他人所指出的，最好的解决方法是编写我们自己的滚动代码。但是，我们不能证明为解决仅在 iOS 上出现的问题所做的努力是合理的。希望苹果可以解决这个问题更有意义，特别是因为正如 QuirksMode 所暗示的那样，苹果现在在他们对“位置：固定”的解释中独树一帜。
http://www.quirksmode.org/blog/archives/2013/12/position_fixed_1.html
对我们有用的是根据用户是否缩放在“位置：固定”和“位置：绝对”之间切换。这用可预测的行为替换了我们的“浮动”标题，这对可用性很重要。缩放时，行为不是我们想要的，但用户可以通过反转缩放轻松解决此问题。
// 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";
});
}
【讨论】：