固定在Mobile Safari中的位置

是否可以在Mobile Safari中相对于视口定位固定的元素？正如许多人所指出的那样，这position: fixed是行不通的，但是Gmail只是提供了几乎是我想要的解决方案-在邮件视图中查看浮动菜单栏。

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

iOS 5支持position：fixed。

这个固定位置的div可以仅用两行代码来实现，该代码将div滚动移动到页面底部。

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

请参阅Google针对此问题的解决方案。基本上，您必须自己使用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做出该产品的充分理由有意识地决定将固定位置处理为静态。

我认为gmail只是跟踪计时器上的滚动位置并相应地重新定位div。

我见过的最好的解决方案是doctyper。

一个更简单的jQuery解决方案，可将元素滚动到滚动：链接

您可以尝试使用touch-scroll，这是一个jQuery插件，可以模拟移动Safari中固定元素的滚动：https：//github.com/neave/touch-scroll

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

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

这就是我做到的。一旦将页面向下滚动，它就会“粘着”到窗口顶部，在标题下方有一个导航块。如果您滚动回到顶部，则导航会回到我使用的位置：在非移动平台和iOS5的CSS中已修复的位置。其他移动版本的确会出现“滞后”，直到在设置之前屏幕停止滚动。

// 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此meta标签中不存在有助于防止通常在页面上不存在的其他页脚填充。菜单栏的高度会增加视口的高度，从而使固定的背景变为可滚动的。

在这里，您可以看到哪些（移动）浏览器支持CSS位置固定+那里版本。

http://caniuse.com/css-fixed

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

正如其他人指出的，最好的解决方法是编写我们自己的滚动代码。但是，我们无法证明为解决仅在iOS上出现的问题而付出的努力。希望苹果公司可以解决此问题更有道理，尤其是因为正如QuirksMode所建议的那样，苹果公司现在对“ position：fixed”的立场是独立的。

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";
    });
}