CSS 位置：固定在 iPad 和 iPhone 上不起作用

position: fixed doesn't work on iPad and iPhone

提问by Tower

I have been struggling with fixed positioning in iPad for a while. I know iScrolland it does not always seem to work (even in their demo). I also know that Sencha has a fix for that, but I couldn't Ctrl+ Fthe source code for that fix.

我一直在为 iPad 中的固定定位而苦苦挣扎。我知道iScroll并且它似乎并不总是有效（即使在他们的演示中）。我也知道 Sencha 有一个修复程序，但我不能Ctrl+F该修复程序的源代码。

I am hoping that someone may have the solution. The problem is that fixed positioned elements do not get updated when the user pans down/up on an iOS powered mobile Safari.

我希望有人可能有解决方案。问题是当用户在 iOS 驱动的移动 Safari 上向下/向上平移时，固定定位的元素不会更新。

采纳答案by Tower

I ended up using the new jQuery Mobile v1.1: http://jquerymobile.com/blog/2012/04/13/announcing-jquery-mobile-1-1-0/

我最终使用了新的 jQuery Mobile v1.1：http: //jquerymobile.com/blog/2012/04/13/annoucing-jquery-mobile-1-1-0/

We now have a solid re-write that provides true fixed toolbars on the a lot of popular platforms and safely falls back to static toolbar positioning in other browsers.

The coolest part about this approach is that, unlike JS-based solutions that impose the unnatural scrolling physics across all platforms, our scrolling feels 100% native because it is. This means that scrolling feels right everywhere and works with touch, mousewheel and keyboard user input. As a bonus, our CSS-based solution is super lightweight and doesn't impact compatibility or accessibility.

我们现在有一个可靠的重写，它在许多流行的平台上提供真正的固定工具栏，并安全地回退到其他浏览器中的静态工具栏定位。

这种方法最酷的部分是，与基于 JS 的解决方案在所有平台上施加不自然的滚动物理不同，我们的滚动感觉是 100% 原生的，因为它是. 这意味着滚动感觉无处不在，并且适用于触摸、鼠标滚轮和键盘用户输入。作为奖励，我们基于 CSS 的解决方案是超轻量级的，不会影响兼容性或可访问性。

回答by Spudley

A lot of mobile browsers deliberately do not support position:fixed;on the grounds that fixed elements could get in the way on a small screen.

许多移动浏览器故意不支持position:fixed;，理由是固定元素可能会妨碍小屏幕。

The Quirksmode.org site has a very good blog post that explains the problem: http://www.quirksmode.org/blog/archives/2010/12/the_fifth_posit.html

Quirksmode.org 站点有一篇很好的博客文章解释了这个问题：http: //www.quirksmode.org/blog/archives/2010/12/the_fifth_posit.html

Also see this page for a compatibility chart showing which mobile browsers support position:fixed;: http://www.quirksmode.org/m/css.html

另请参阅此页面以获取显示哪些移动浏览器支持的兼容性图表position:fixed;：http: //www.quirksmode.org/m/css.html

(but note that the mobile browser world is moving very quickly, so tables like this may not stay up-to-date for long!)

（但请注意，移动浏览器的世界发展非常迅速，因此像这样的表格可能不会长时间保持最新状态！）

Update: iOS 5 and Android 4 are both reported to have position:fixed support now.

更新：据报道 iOS 5 和 Android 4 现在都有位置：固定支持。

I tested iOS 5 myself in an Apple store today and can confirm that it does work with position fixed. There are issues with zooming in and panning around a fixed element though.

我今天在 Apple Store 中亲自测试了 iOS 5，可以确认它在固定位置的情况下可以正常工作。但是，在固定元素周围放大和平移存在问题。

I found this compatibility table far more up to date and useful than the quirksmode one: http://caniuse.com/#search=fixed

我发现这个兼容性表比 quirksmode 更加最新和有用：http: //caniuse.com/#search=fixed

It has up to date info on Android, Opera (mini and mobile) & iOS.

它有关于 Android、Opera（迷你和移动）和 iOS 的最新信息。

回答by Jonathan.

Fixed positioning doesn't work on iOS like it does on computers.

固定定位在 iOS 上不像在电脑上那样工作。

Imagine you have a sheet of paper (the webpage) under a magnifying glass(the viewport), if you move the magnifying glass and your eye, you see a different part of the page. This is how iOS works.

想象一下，您在放大镜（视口）下有一张纸（网页），如果您移动放大镜和眼睛，您会看到页面的不同部分。这就是iOS的工作方式。

Now there is a sheet of clear plastic with a word on it, this sheet of plastic stays stationary no matter what (the position:fixed elements). So when you move the magnifying glass the fixed element appearsto move.

现在有一张透明塑料片，上面写着一个字，这片塑料片无论如何都保持静止（位置：固定元素）。因此，当您移动放大镜时，固定元素似乎在移动。

Alternatively, instead of moving the magnifying glass, you move the paper (the webpage), keeping the sheet of plastic and magnifying glass still. In this case the word on the sheet of plastic will appear to stay fixed, and the rest of the content will appear to move (because it actually is) This is a traditional desktop browser.

或者，不是移动放大镜，而是移动纸张（网页），保持塑料片和放大镜静止不动。在这种情况下，塑料片上的单词看起来会保持固定，而其余内容看起来会移动（因为它实际上是）这是传统的桌面浏览器。

So in iOS the viewport moves, in a traditional browser the webpage moves. In both cases the fixed elements stay still in reality; although on iOS the fixed elements appear to move.

所以在 iOS 中视口移动，在传统浏览器中网页移动。在这两种情况下，固定元素在现实中保持静止；尽管在 iOS 上，固定元素似乎在移动。

---

---

The way to get around this, is to follow the last few paragraphs in this article

要解决这个问题的方法，是遵循最后几段在这篇文章中

(basically disable scrolling altogether, have the content in a separate scrollable div (see the blue box at the top of the linked article), and the fixed element positioned absolutely)

（基本上完全禁用滚动，将内容放在单独的可滚动 div 中（参见链接文章顶部的蓝色框），并且固定元素绝对定位）

---

---

"position:fixed" now works as you'd expect in iOS5.

“位置：固定”现在可以像您在 iOS5 中期望的那样工作。

回答by Jason D.

position: fixed does work on android/iphone for vertical scrolling. But you need to make sure your meta tags are fully set. e.g

位置：fixed 确实适用于 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">

Also if you're planning on having the same page work on android pre 4.0, you need to set the top position also, or a small margin will be added for some reason.

此外，如果您计划在 android pre 4.0 上使用相同的页面，则还需要设置顶部位置，否则会因某种原因添加少量边距。

回答by U?ur ?zp?nar

now apple support that

现在苹果支持

overflow:hidden;
-webkit-overflow-scrolling:touch;

回答by kenecaswell

I had this problem on Safari (iOS 10.3.3) - the browser was not redrawing until the touchend event fired. Fixed elements did not appear or were cut off.

我在 Safari (iOS 10.3.3) 上遇到了这个问题 - 在 touchend 事件触发之前，浏览器不会重绘。固定元素没有出现或被切断。

The trick for me was adding transform: translate3d(0,0,0); to my fixed position element.

我的诀窍是添加转换：translate3d(0,0,0); 到我的固定位置元素。

.fixed-position-on-mobile {
  position: fixed;
  transform: translate3d(0,0,0);
}

EDIT- I now know why the transform fixes the issue: hardware-acceleration. Adding the 3D transformation triggers the GPU acceleration making for a smooth transition. For more on hardware-acceleration checkout this article: http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css.

编辑- 我现在知道为什么转换解决了这个问题：硬件加速。添加 3D 变换会触发 GPU 加速，从而实现平滑过渡。有关硬件加速的更多信息，请查看本文：http: //blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css。

回答by Martin

Fixed Footer (here with jQuery):

固定页脚（此处使用 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}

Hope it helps.

希望能帮助到你。

回答by Becario Senior

Avoid on the same box using transform:--- and position:fixed. Element will stay in position:static if there is any transform.

避免在同一个盒子上使用 transform:--- 和 position:fixed。如果有任何变换，元素将保持在 position:static 。

回答by Talvi Watia

Even though the CSS attribute {position:fixed;}seems (mostly) working on newer iOS devices, it is possible to have the device quirk and fallback to {position:relative;}on occasion and without cause or reason. Usually clearing the cache will help, until something happens and the quirk happens again.

尽管 CSS 属性{position:fixed;}似乎（大部分）适用于较新的 iOS 设备，但有时可能会出现设备怪癖和回退，{position:relative;}而无需任何原因或原因。通常清除缓存会有所帮助，直到发生某些事情并且怪癖再次发生。

Specifically, from Apple itself Preparing Your Web Content for iPad:

具体来说，来自 Apple 本身为 iPad 准备您的 Web 内容：

Safari on iPad and Safari on iPhone do not have resizable windows. In Safari on iPhone and iPad, the window size is set to the size of the screen (minus Safari user interface controls), and cannot be changed by the user. To move around a webpage, the user changes the zoom level and position of the viewport as they double tap or pinch to zoom in or out, or by touching and dragging to pan the page. As a user changes the zoom level and position of the viewport they are doing so within a viewable content area of fixed size (that is, the window). This means that webpage elements that have their position "fixed" to the viewport can end up outside the viewable content area, offscreen.

iPad 上的 Safari 和 iPhone 上的 Safari 没有可调整大小的窗口。在 iPhone 和 iPad 上的 Safari 中，窗口大小设置为屏幕大小（减去 Safari 用户界面控件），用户无法更改。要在网页上移动，用户可以在双击或捏合以放大或缩小，或通过触摸和拖动平移页面时更改视口的缩放级别和位置。当用户更改视口的缩放级别和位置时，他们会在固定大小的可查看内容区域（即窗口）内执行此操作。这意味着其位置“固定”到视口的网页元素可能会出现在屏幕外的可查看内容区域之外。

What is ironic, Android devices do not seem to have this issue. Also it is entirely possible to use {position:absolute;}when in reference to the body tag and not have any issues.

讽刺的是，Android 设备似乎没有这个问题。此外，完全可以{position:absolute;}在参考 body 标签时使用，并且没有任何问题。

I found the root cause of this quirk; that it is the scroll event not playing nice when used in conjunction with the HTML or BODY tag. Sometimes it does not like to fire the event, or you will have to wait until the scroll swing event is finished to receive the event. Specifically, the viewport is re-drawn at the end of this event and fixed elements can be re-positioned somewhere else in the viewport.

我找到了这个怪癖的根本原因；当与 HTML 或 BODY 标签结合使用时，滚动事件效果不佳。有时它不喜欢触发事件，或者您必须等到滚动摆动事件完成才能接收事件。具体来说，视口在此事件结束时重新绘制，固定元素可以重新定位在视口中的其他位置。

So this is what I do: (avoid using the viewport, and stick with the DOM!)

所以这就是我所做的：（避免使用视口，并坚持使用 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>

In essence this will cause the BODY to be the size of the viewport and non-scrollable. The scrollable DIV nested inside will scroll as the BODY normally would (minus the swing effect, so the scrolling does stop on touchend.) The fixed DIV stays fixed without interference.

本质上，这将导致 BODY 为视口的大小且不可滚动。嵌套在内部的可滚动 DIV 将像 BODY 正常那样滚动（减去摆动效果，因此滚动不会在触摸端停止。）固定 DIV 保持固定而不受干扰。

As a side note, a high z-indexvalue on the fixed DIV is important to keep the scrollable DIV appear to be behind it. I normally add in window resize and scroll events also for cross-browser and alternate screen resolution compatibility.

作为旁注，z-index固定 DIV 上的高值对于保持可滚动 DIV 看起来在其后面很重要。我通常还会添加窗口调整大小和滚动事件，以实现跨浏览器和备用屏幕分辨率的兼容性。

If all else fails, the above code will also work with both the fixed and scrollable DIVs set to {position:absolute;}.

如果所有其他方法都失败了，上面的代码也适用于固定和可滚动 DIV 设置为{position:absolute;}.

回答by abdullah

using jquery i am able to come up with this. it doesnt scroll smooth, but it does the trick. you can scroll down, and the fixed div pops up on top.

使用 jquery 我能够想出这个。它不会平滑滚动，但它确实有效。您可以向下滚动，固定 div 会在顶部弹出。

THE CSS

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>

THE HTML

HTML

<div id="lockSticky"></div>
<div id="lockDiv">fooo</div>

THE 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>

Finally we want to determine if the ipod touch in landscape or portrait mode to display accordingly

最后，我们要确定 iPod touch 是否在横向或纵向模式下相应地显示

<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>