javascript - 如何解析位置: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;来解决这个问题。