如何解决职位：固定在iOS（iPhone / iPad）上的底部工具栏
我有一个固定在我的网站每个页面底部的酒吧，使用position：fixed。 问题是在像iPhone或iPad这样的设备上这个属性是不被尊重的。
我试图使用JavaScript来检测屏幕高度，滚动位置，这在iPad上完美的作品：
$( window ).scroll( function ( ) { $( "#bar" ).css( "top", ( $( window ).height() + $( document ).scrollTop() - 90 ) +"px" ); } ); 正如你所看到的我正在使用jQuery。 问题是这个代码在iPhone上不太适用，因为窗口的高度不包括位置栏（也包括debugging栏，如果有的话），所以栏首先放在正确的位置，但是当你滚动它时，固定在正确的位置（Mobile Safari的地址栏所使用的像素数量）之上。
有没有办法获得这些信息并正确地修复这个工具栏？
请记住，这不是一个为iPhone制作的网站，所以我根本不能使用像iScroll这样的技巧。
从iOS 8.4开始，你可以使用position: sticky; 分别position: -webkit-sticky; 解决这个问题。
我只能指出你的方向：
- 固定定位-上移动的Safari
- CSS-位置固定溶液
- 所述移动-WebKit的CSS-固定位置问题
- SO：怪异的WebKit-issue-with-position-fixed
我只是做了这样的事情，坚持导航窗口的顶部 。 如果您滚动传递，导航栏将从标题下方开始粘贴。 iOS5确实支持固定定位。 该项目将捕捉到滚动结束后的位置，但仍能正常工作。 '#sticky-anchor'是一个围绕我的导航的包装div。
别忘了我在哪里find这些东西，从很多网站上得到一些小东西。 您可以调整它以适应您的需求。
$(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' }); } }; };
我在我的网站上解决了这个问题，并在Stack Overflow上回答了这个问题。 从那以后，我得到了很多人的谢意。 对不起，我没时间总结。
iScroll可能是您的问题的最简单的解决scheme。 相反，你相信它也适用于Android和歌剧。 它的新版本performance出色。
这一点的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;
我认为设置高度帮助正确渲染，并在桌面浏览器，我想这个菜单固定在浏览器窗口的底部。