如何解决 position:fixed for a bottom toolbar on iOS (iPhone/iPad)

Question

我有一个栏，通过使用 position:fixed 固定在我网站上每个页面的底部。 问题是在 iPhone 或 iPad 等设备上，此属性不受尊重。

我尝试使用 javascript 来检测屏幕高度、滚动位置，这在 iPad 上非常有效：

$( window ).scroll( function ( ) { $( "#bar" ).css( "top", ( $( window ).height() + $( document ).scrollTop() - 90 ) +"px" );  } );

如您所见，我正在使用 jQuery。 问题是这段代码在 iPhone 上不太适用，因为窗口的高度不包括位置栏（如果存在调试栏，也包括），所以该栏一开始就在正确的位置，但是当你滚动它时固定在正确位置上方（Mobile Safari 的地址栏使用的像素数量）。

有没有办法获取此信息并正确修复此工具栏？

请记住，这不是为 iPhone 制作的网站，所以我根本无法使用像 iScroll 这样的技巧。

Answer 1

从iOS 8.4开始，你可以使用position: sticky; 分别position: -webkit-sticky; 解决这个问题。

Answer 2

我只是做了类似的事情，将导航粘贴到窗口的顶部 。 导航从标题下面开始然后如果你滚动它就会粘住。 iOS5确实支持固定定位。 该项目将在滚动结束后捕捉到位置，但仍然可以正常工作。 '#sticky-anchor'是我导航的包装div。

不记得我发现这一切的地方，从很多网站得到了一些小块。 您可以根据自己的需要进行调整。

$(window).scroll(function(event){

// sticky nav css NON mobile way
   sticky_relocate();

   var st = $(this).scrollTop();

// sticky nav iPhone android mobile way
// iOS 4 and below

   if (navigator.userAgent.match(/OS 5(_\d)+ like Mac OS X/i)) {
        //do nothing uses sticky_relocate above
   } 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 3

我在我的网站上修复了这个，并在Stack Overflow上回答了这个问题。 从那时起，我已经得到了实施它的人们的感谢。 对不起，我没时间摘要。

https://stackoverflow.com/a/10030251/1118070

Answer 4

我只能指出你的某些方向：

• 固定定位-上移动的Safari
• CSS-位置固定溶液
• 所述移动-WebKit的CSS-固定位置问题
• SO：怪异的webkit-issue-with-position-fixed

Answer 5

iScroll probaply是解决您问题的最简单方法。 与您的相信相反，它也适用于Android和Opera。 它的新版本表现出色。

http://cubiq.org/iscroll-4

Answer 6

这段jquery代码对我有用：

if(navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod'){
    $("#footer_menu").css("position", "fixed").css("top", $('window').height());
};

否则#footer_menu的css是：

position:fixed;
bottom:0;
width:100%;
padding:5px 0;
text-align:center;
height:44px;

我认为设置高度有助于正确渲染，在桌面浏览器上我希望此菜单固定在浏览器窗口的底部。

Answer 7

尝试根据window.innerHeight在iPhone上隐藏/显示底部固定导航。 每当工具栏显示时，通常在向上滚动时，您可以显示底部导航并在向下滚动时隐藏工具栏，当工具栏隐藏时。

你可以使用这样的代码：

    var windowHeight = {
  small: window.innerHeight,
  middle: window.innerHeight,
  big: window.innerHeight
}
window.addEventListener('resize', function(){
  var currentHeight = window.innerHeight;
  if (currentHeight < windowHeight.small) {
    windowHeight.small = currentHeight;
  }

  if (currentHeight > windowHeight.big) {
    windowHeight.big = currentHeight;
  }

  console.log('windowHeight.small', windowHeight.small, 'windowHeight.middle', windowHeight.middle, 'windowHeight.big', windowHeight.big, 'currentHeight', currentHeight);

  if (currentHeight === windowHeight.big) {
    transform(stickyNav, 'translate3d(0,120%,0)');
    console.log('Hide bottom nav on big screen!');
  } else if (currentHeight === windowHeight.middle) {
    transform(stickyNav, 'translate3d(0,0,0)');
    console.log('Show bottom nav on middle screen!');
  } else {
    transform(stickyNav, 'translate3d(0,-100%,0)');
    console.log('Display bottom nav high up on smaller screen!');
  }
})

变换（stickyNav，'translate3d（x，x，x）'）函数是一个简单的函数，它接受底部导航，然后应用变换以隐藏/显示放置在底部的项目。

Answer 8

我记得使用position: sticky; bottom: 0;解决了这个问题position: sticky; bottom: 0; 对于高度为零的容器元素，则使用position: absolute; bottom: var(--how-much-space-u-like-below-bottom-of-screen-and-fixed-element); position: absolute; bottom: var(--how-much-space-u-like-below-bottom-of-screen-and-fixed-element); 在你想固定在视口底部的实际东西上。 我相信它至少在 iOS Safari 15 和 16 上解决了这个问题。

<div class="sticky-container" style="position: sticky; bottom: 0;">
  <div class="fixed-to-bottom" style="position: absolute; bottom: 1rem;">
    <button>hello world</button>
  </div>
</div>

Answer 9

感谢Google，不是我：

http://code.google.com/mobile/articles/webapp_fixed_ui.html

实际上非常简单。