Question

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

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

Answer 1

这个固定位置div只需2行代码就可以实现，它将div上的div移动到页面底部。

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

Answer 2

iOS 5有support for position:fixed。

Answer 3

见Google's solution to this problem。你基本上必须使用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

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

阅读“ 4.修改依赖于CSS固定定位的代码”这一点，您会发现Apple有充分理由明确决定将固定位置作为静态处理。

Answer 6

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

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

一个简单的jQuery解决方案，可以移动元素onscroll：link

Answer 7

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

在http://neave.github.com/touch-scroll/

上查看iOS设备的示例

或者另一种选择是iScroll：http://cubiq.org/iscroll

Answer 8

这就是我做到的。当你向下滚动页面时，我有一个位于标题下方的导航块，它“粘在”窗口的顶部。如果您向后滚动到顶部，导航会返回到它的位置我使用position：固定在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' });
            }
        };

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上发生的问题的努力。希望Apple可以解决这个问题更有意义，特别是因为正如QuirksMode所暗示的那样，Apple现在独自一人解释他们的定位：固定＆＃34;。

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

对我们有用的是在＆＃34; position：fixed＆＃34;之间切换。和＆＃34;职位：绝对＆＃34;取决于用户是否已缩放。这取代了我们的＆＃34;浮动＆＃34;具有可预测行为的标题，这对可用性很重要。缩放时，行为不是我们想要的，但用户可以通过反转缩放轻松解决此问题。

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

修复了Mobile Safari中的定位

11 个答案: