Javascript 移动Safari中的固定定位

是否可以在Mobile Safari中定位相对于视口固定的元素？正如许多人所指出的，

position:fixed

不起作用，但Gmail刚刚推出了一个解决方案，这几乎就是我想要的——请参见消息视图上的浮动菜单栏

---

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

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

div

我见过的最好的解决办法是在

---

一个简单的jQuery解决方案是在滚动条上移动一个元素：

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

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

---

这可能会引起你的兴趣。这是苹果开发支持页面


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

这对我很有效：

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

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

（44是我酒吧的高度）

---

尽管该条仅在滚动的末尾移动…

请参阅。基本上，您必须使用JavaScript自己滚动内容。还提供了一个库，用于在一个非常高效的庄园中获得这种行为。

您可以尝试使用touch scroll，这是一个jQuery插件，在mobile Safari上模拟固定元素的滚动：

在以下位置查看iOS设备的示例：

或者另一种选择是iScroll:

iOS 5已经有了。

我就是这样做的。 我有一个导航块，它位于页眉下方，一旦你向下滚动页面，它就会“粘”到窗口顶部。 如果你滚动回到顶部，导航就会回到原来的位置 对于非移动平台和iOS5，我使用position:fixed-in-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' });
            }
        };

//css
#粘滞的{
宽度：100%；
高度：50px；
位置：固定；
排名：0；
z指数：1；
}
//jquery
//粘性导航
函数重新定位（）{
var window_top=$（window.scrollTop（）；
var div_top=$（'#粘性锚点'）.offset（）.top；
如果（窗口顶部>分区顶部）
$（'#sticky'）.addClass（'stick'）；
其他的
$（'#sticky'）。移除类（'stick'）；
}
$（窗口）。滚动（功能（事件）{
//粘性导航css非移动方式
粘性_重新定位（）；
var st=$（this.scrollTop（）；
//粘性导航iPhone安卓移动方式iOS div_顶部）{
$（#sticky'）.css（{'top'：st，'position'：'absolute'}）；
}否则{
$（'#sticky'）.css（{'top'：'auto'}）；
}
};

另外，确保

height=deviceheight

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

在这里，您可以看到哪些（移动）浏览器支持css position fixed+there版本

---

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

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

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

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

---

那么，如何获得滚动位置呢？我添加了跟踪onscroll的更简单方法。可以通过jQuery自由地挖掘，以找到要使用的确切方法；它可能是window.pageYOffset，但我不确定doctyper的问题是，当有太多内容无法滚动时，手机的响应开始滞后……深度链接：在该链接上没有给出“非常好的理由”。所有这些都是对当前情况的描述，我使用了两者。两者都很有效。如果您需要的不仅仅是滚动控制（即固定定位），iScroll 4更全面。触摸滚动有限且更小。今天早上看到了。最后其他不在iOS上的移动设备呢？为什么这是公认的答案？仍然有许多用户使用较低版本的iOS，其中一个原因是缺少对iOS设备的支持。@NickGreen-因为它适用于iOS 5，我们希望用户将他们的旧设备扔进垃圾箱，这与苹果有关，因为大多数软件在较旧的手机上不起作用。如果使用position:fixed as of iOS 5.1.1（或更早版本），你可能会陷入痛苦的世界。是马车。非常有问题。这不是有点延迟吗？onscroll直到滚动完成后才会启动，因此元素将随着页面滚动，然后在滚动完成时捕捉到底部。此外，mobile Safari现在支持硬件加速转换。So element.style.webkitttransform=“translate3d（0，+window.pageYOffset+“px，0）”；与设置最高值相比，执行速度更快，波动性更小。@Adam:不知道为什么，但这对我不起作用。元素根本没有出现。前有

位置：固定；最高：50%；左：50%。链接已过时。尝试
// 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";
    });
}