修复了 Mobile Safari 中的定位

StackOverflow https://stackoverflow.com/questions/743123

题

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

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

有帮助吗？

解决方案

iOS 5 有 支持位置：固定.

其他提示

此固定位置的div可以在仅2行代码其移动DIV上滚动到页面的底部来实现。

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

请参阅谷歌的解决方案，这问题的。基本上，你必须滚动使用JavaScript内容自己。 煎茶触摸还提供了一个非常高性能的庄园得到这个行为的库。

它为我工作：

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解决方案，onscroll移动的元件：链接

您可以尝试使用触摸滚动，一个jQuery插件，模仿与移动的Safari固定元件滚动： HTTPS ：//github.com/neave/touch-scroll

在 http://neave.github.com/touch-scroll查看示例iOS设备/

或替代方法是iScroll： http://cubiq.org/iscroll

这是我如何做的。 我有一个导航块是标题下方，一旦你页面向下卷动它“粘”到窗口的顶部。 如果您滚动回到顶部，导航追溯到它的地方 我使用的位置是：固定在CSS中的非移动平台和iOS5的。 其他移动版本都具有“滞后”，直到屏幕停止它的设置之前滚动。

// 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的位置固定+有版本。

http://caniuse.com/css-fixed

我们的网络应用程序需要一个固定报头。我们是，我们只有支持最新的浏览器幸运的，但Safari浏览器在这方面的行为引起了我们一个真正的问题。

最好的解决，正如其他人所指出的，是我们自己写的滚动代码。但是，我们不能证明这种努力解决只发生在iOS上的问题。它更有意义，希望苹果可以解决这个问题，尤其是因为，如怪异模式表明，苹果现在独自站在他们的“位置是：固定”的解释。

http://www.quirksmode.org/blog/archives/十二分之二千零十三/ 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";
    });
}
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top