我有一个栏,它通过使用 position:fixed 固定在我网站上每个页面的底部。问题是在 iPhone 或 iPad 等设备上,此属性不受尊重。
我尝试使用 javascript 来检测屏幕高度、滚动位置,这在 iPad 上非常有效:
$( window ).scroll( function ( ) { $( "#bar" ).css( "top", ( $( window ).height() + $( document ).scrollTop() - 90 ) +"px" ); } );
如您所见,我正在使用 jQuery。问题是这段代码在 iPhone 上不太适用,因为窗口的高度不包括位置栏(如果存在调试栏,也包括),所以该栏一开始就在正确的位置,但是当你滚动它时固定在正确位置上方(Mobile Safari 的地址栏使用的像素数量)。
有没有办法获取此信息并正确修复此工具栏?
请记住,这不是为 iPhone 制作的网站,所以我根本无法使用 iScroll 之类的技巧。
最佳答案
从iOS 8.4开始,可以分别使用position: sticky;
position: -webkit-sticky;
来解决这个问题。
关于javascript - 如何解析位置:fixed for a bottom toolbar on iOS (iPhone/iPad),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5409601/