如何解决位置：固定在iOS（iPhone / iPad）上的底部工具栏 [英] How to resolve position:fixed for a bottom toolbar on iOS (iPhone/iPad)

问题描述

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

I have a bar that is fixed to the bottom of every page on my website by using position:fixed. The problem is that on devices like iPhone or iPad this property is not respected.

我尝试使用javascript来检测屏幕高度，滚动位置，这完全适用于iPad：

I tried to use javascript to detec the screen height, scroll position, and this works perfectly on the iPad:

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

正如你所看到的，我正在使用jQuery。问题是这个代码在iPhone上不起作用，因为窗口的高度不包括位置栏（以及调试栏，如果存在），所以条形图首先出现在正确的位置，但是当你滚动它时固定在正确的位置上方（Mobile Safari的位置栏使用的像素数量）。

As you can see I'm using jQuery. The problem is that this code does not quite work on the iPhone because the window's height does not include the location bar (and also the debug bar if present), so the bar goes on the right place at first, but as you scroll it gets fixed above the right position (the amount of pixels used by Mobile Safari's location bar).

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

Is there a way to get this information and properly fix this toolbar?

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

Have in mind this is not a website made for iPhone, so I can't use tricks like iScroll at all.

推荐答案

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

Since iOS 8.4, you can use position: sticky; respectively position: -webkit-sticky; to fix this.

这篇关于如何解决位置：固定在iOS（iPhone / iPad）上的底部工具栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！