如何解决位置:固定在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

我只能给你指出一些方向：