67

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

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

4

11 回答 11

74

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

window.onscroll = function() {
  document.getElementById('fixedDiv').style.top =
     (window.pageYOffset + window.innerHeight - 25) + 'px';
};
于 2010-08-17T22:00:53.757 回答
35

iOS 5支持 position:fixed。

于 2011-06-08T00:57:20.193 回答
10

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

于 2010-12-22T18:58:58.613 回答
6

它对我有用：

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

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

（44是我酒吧的高度）

尽管该栏仅在滚动结束时移动...

于 2010-12-01T18:35:31.400 回答
5

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

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

于 2010-11-29T13:40:56.207 回答
4

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

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

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

于 2009-04-13T05:57:27.703 回答
3

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

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

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

于 2011-02-15T15:12:11.303 回答
1

我就是这样做的。向下滚动页面后，我在标题下方有一个导航块，它“粘”到窗口顶部。如果您滚动回顶部，导航会回到我使用位置的位置：非移动平台和 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' });
            }
        };
于 2012-03-20T17:15:31.017 回答
1 
<meta name="viewport" content="width=320, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

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

于 2012-05-11T22:52:53.830 回答
0

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

http://caniuse.com/css-fixed

于 2013-03-12T08:37:41.237 回答
0

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

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

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";
    });
}
于 2014-10-22T13:38:00.480 回答