修复了Mobile Safari中的定位

是否可以在Mobile Safari中相对于视口定位元素？正如许多人所指出的那样,position: fixed它不起作用,但Gmail刚刚推出了一个几乎就是我想要的解决方案 - 请参阅消息视图中的浮动菜单栏.

在JavaScript中获取实时滚动事件也是一种合理的解决方案.

1> 小智..：

---

这个固定位置div只需2行代码即可实现,它将div上的div移动到页面底部.

window.onscroll = function() {
  document.getElementById('fixedDiv').style.top =
     (window.pageYOffset + window.innerHeight - 25) + 'px';
};

---

直到_after_滚动完成后才会触发onscroll,因此元素将随页面滚动,然后在滚动完成时捕捉到底部.

---

除此之外,移动版Safari现在支持硬件加速转换.所以element.style.webkitTransform = "translate3d(0," + window.pageYOffset + "像素,0)"; 实际上会比设置最高值更快,更不稳定.

---

这不是一个延迟吗？

2> vava..：

---

iOS 5 支持position:fixed.

---

为什么这是公认的答案？由于缺少对该设备的支持,iOS版本较低的用户仍有很多用户.

---

如果您在IOS 5.1.1(或更早版本)中使用position:fixed,那么您可能会陷入痛苦的世界.这是马车.非常马车.

3> JoshNaro..：

---

请参阅Google针对此问题的解决方案.你基本上必须使用JavaScript自己滚动内容.Sencha Touch还提供了一个库,可以在一个高效的庄园中获得这种行为.

4> Raphael Pete..：

---

它对我有用:

function changeFooterPosition() {   
  $('.footer-menu').css('top', window.innerHeight + window.scrollY - 44 + "px");
}

$(document).bind('scroll', function() {
  changeFooterPosition();
});

(44是我的酒吧的高度)

虽然栏只在卷轴的末尾移动...

5> 小智..：

---

这可能会让你感兴趣.这是Apple Dev支持页面.
http://developer.apple.com/library/ios/#technotes/tn2010/tn2262/请

阅读" 4.修改依赖于CSS固定定位的代码 "这一点,您会发现Apple有很好的理由制作有意识地决定将固定位置作为静态处理.

---

在那个链接上没有"非常好的理由".所有尝试都是对当前情况的描述.