移动浏览器的固定定位

Posted 2023-03-15

【中文标题】移动浏览器的固定定位

【英文标题】：Fixed positioning for mobile browsers

【发布时间】：2010-07-30 15:34:08

【问题描述】：

在我正在构建的移动网站上，我需要顶部标题保持固定位置。

我知道 Mobile Safari 的固定位置解决方案，如下所示：

http://doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/

我试过了，效果很好。但是，我想知道是否有适用于所有主要智能手机的移动浏览器的单一解决方案。注意：我不需要页脚保持固定，只需要顶部页眉。所以这应该更容易适应所有移动屏幕尺寸，因为我只是将 div 的顶部设置为 0 onScroll。

谢谢！

【问题讨论】：

另外请记住，ios 5 上的 Mobile Safari 支持 position: fixed。

aha Jin，固定定位现在工作正常

【参考方案1】：

重要更新

从 iOS 5 开始，固定定位在移动设备上运行良好。同样最新的机器人支持它。

---

旧答案

我认为iScroll 是最积极开发的解决方案，它确实支持android

但有几点需要注意：

通过启用此 hack，您将禁用人们习惯喜欢缩放的功能。 这给您的解决方案增加了很多复杂性。

出于这些原因，JQtouch 决定not to use it：

没问题。目前不是 jQTouch 支持。不知道如何 你很熟悉，但主要问题 这是移动 Safari 不 支撑位置：固定。几个人 致力于实施 这一点，最值得注意的是 Cubiq 和 Doctyper。 两个都觉得我不对 因此为什么我默认不这样做，但是 你可以尝试做一个 支持它的扩展-

在处理需要在 iPhone 上固定定位的内容时，我个人更喜欢使用静态定位，并且在动态更改内容时自动滚动到底部/顶部。

【讨论】：

请注意，截至 2011 年 7 月，iScroll 确实支持捏合/缩放。

像wikia.com/Wikia这样的网站如何在底部获得完美的固定片？我也在 fixya.com 上看到过

@Sam iScroll4 现在可以更新/修复您提到的问题cubiq.org/iscroll-4

【参考方案2】：

两个多星期以来，我一直面临同样的问题。这个解决方案对我有用。只需包含

-webkit-backface-visibility：隐藏；

在元素的 css 以及 position:fixed 中。

它会正常工作

【参考方案3】：

根据 Sam Saffron 发布的链接，新版本的 iScroll（第 4 版）似乎解决了 Sam 列出的一些问题。

iScroll-4

除了所有以前的 iScroll 功能外，第 4 版还引入了：

捏合/缩放 上拉/下拉刷新 提高速度和动力 对齐元素 可自定义的滚动条

我只看过他们网站上的演示，所以我不能保证，但它看起来不错！