修复了 Mobile Safari 中的定位

Question

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

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

Answer 1

只需 2 行代码即可实现此固定位置 div，将滚动时的 div 移动到页面底部。

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

Answer 2

iOS 5 有 支持位置：固定。

Answer 3

请参阅 Google 针对此问题的解决方案。您基本上必须使用 JavaScript 自己滚动内容。 Sencha Touch 还提供了一个库，用于在非常高性能的庄园中实现此行为。

Answer 4

它对我有用：

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

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

（44是我的栏的高度）

虽然栏只在滚动的末尾移动......

Answer 5

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

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

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

Answer 6

您可能对此感兴趣。这是 Apple Dev 支持页面。
http://developer.apple.com/library/ios/#technotes/ tn2010/tn2262/

阅读“4.修改依赖CSS固定定位的代码”这一点，你会发现苹果有意识地决定将固定位置处理为静态是有充分理由的。

Answer 7

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

使用 iOS 设备查看示例，网址为 http:// /neave.github.com/touch-scroll/

或者替代方案是 iScroll： http://cubiq.org/滚动

Answer 8

我就是这样做的。
我有一个导航块，它位于标题下方，一旦您向下滚动页面，它就会“粘”到窗口顶部。
如果您滚动回到顶部，导航将返回到原来的位置
我在非移动平台和 iOS5 的 CSS 中使用position:fixed。
其他移动版本确实存在“滞后”，直到屏幕在设置之前停止滚动。

// 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' });
            }
        };

Answer 9

<meta name="viewport" content="width=320, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 

另外，确保此元标记中不存在 height=device-height 有助于防止页面上通常不存在的额外页脚填充。菜单栏高度增加到视口高度，导致固定背景变得可滚动。

Answer 10

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

http://caniuse.com/css-fixed

Answer 11

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

正如其他人指出的那样，最好的解决方法是编写我们自己的滚动代码。但是，我们无法证明修复仅在 iOS 上出现的问题的努力是合理的。希望苹果能够解决这个问题更有意义，特别是因为，正如 QuirksMode 所建议的，苹果现在在“位置：固定”的解释上是独一无二的。

http://www.quirksmode.org/blog/archives/2013/12 /position_fixed_1.html

对我们有用的是根据用户是否缩放来在“position:fixed”和“position:absolute”之间切换。这用可预测的行为取代了我们的“浮动”标头，这对于可用性很重要。缩放时，行为不是我们想要的，但用户可以通过反转缩放轻松解决此问题。

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