Javascript 如何解决位置：已针对 iOS (iPhone/iPad) 上的底部工具栏修复
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5409601/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to resolve position:fixed for a bottom toolbar on iOS (iPhone/iPad)
提问by Wes Souza
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.
我有一个栏，通过使用 position:fixed 固定在我网站上每个页面的底部。问题是在 iPhone 或 iPad 等设备上，此属性不受尊重。
I tried to use javascript to detec the screen height, scroll position, and this works perfectly on the iPad:
我尝试使用 javascript 来检测屏幕高度、滚动位置，这在 iPad 上非常有效：
$( window ).scroll( function ( ) { $( "#bar" ).css( "top", ( $( window ).height() + $( document ).scrollTop() - 90 ) +"px" ); } );
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).
如您所见，我正在使用 jQuery。问题是这段代码在 iPhone 上不太适用，因为窗口的高度不包括位置栏（还有调试栏，如果有的话），所以栏一开始就在正确的位置，但是当你滚动它时固定在正确位置上方（Mobile Safari 的位置栏使用的像素量）。
Is there a way to get this information and properly fix this toolbar?
有没有办法获取此信息并正确修复此工具栏？
Have in mind this is not a website made for iPhone, so I can't use tricks like iScroll at all.
请记住，这不是为 iPhone 制作的网站，因此我根本无法使用 iScroll 之类的技巧。
回答by kraftwer1
Since iOS 8.4, you can use position: sticky;respectively position: -webkit-sticky;to fix this.
从 iOS 8.4 开始，你可以position: sticky;分别使用position: -webkit-sticky;来解决这个问题。
回答by Ryan Ore
I fixed this on my site, and answered this on Stack Overflow. Since then I've gotten a ton of thanks from people who have implemented it. Sorry I don't have time for a summary.
我在我的网站上修复了这个问题，并在 Stack Overflow 上回答了这个问题。从那以后，我从实施它的人那里得到了很多感谢。对不起，我没有时间做总结。
回答by Nick Weaver
回答by g.simms
I just did something like this, sticking the navigation to the TOPof the window.
The nav starts below the header then sticks if you scroll passed it.
iOS5 does support fixed positioning.
The item will snap to position AFTERscroll ends, but still works well.
'#sticky-anchor'is a wrapper div around my navigation.
我只是做了这样的事情，将导航粘贴到窗口的顶部。导航从标题下方开始，如果你滚动通过它，它就会粘住。iOS5 确实支持固定定位。该项目将在滚动结束后对齐位置，但仍能正常工作。
'#sticky-anchor'是围绕我的导航的包装 div。
Don't recall where I found all this, got little pieces from many sites. You can adjust it to fit your needs.
不记得我在哪里找到了所有这些，从许多站点获得了一些小片段。您可以调整它以满足您的需要。
$(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' });
}
};
};
回答by Tosh
iScroll probaply is the easiest solution to your problem. Contrary to your believe it also works for android and opera. The new version of it is performing superb.
iScroll 可能是解决您问题的最简单方法。与您相信的相反，它也适用于 android 和 opera。它的新版本表现非常出色。
回答by budgell
This bit of jquery code worked for me:
这段 jquery 代码对我有用：
if(navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod'){
$("#footer_menu").css("position", "fixed").css("top", $('window').height());
};
otherwise the css for #footer_menu was:
否则 #footer_menu 的 css 是：
position:fixed;
bottom:0;
width:100%;
padding:5px 0;
text-align:center;
height:44px;
I think setting the height helped with rendering properly and on a desktop browser I wanted this menu fixed to the bottom of the browser window.
我认为设置高度有助于正确渲染，并且在桌面浏览器上我希望将此菜单固定到浏览器窗口的底部。
回答by Manuel Che?a
Try hiding/displaying the bottom fixed nav on iPhone based on the window.innerHeight. Whenever the toolbars are displaying, usually when you scroll up, you can display the bottom nav and hide it when scrolling down, when the toolbars hide.
尝试根据 window.innerHeight 在 iPhone 上隐藏/显示底部固定导航。每当工具栏显示时，通常是当您向上滚动时，您可以显示底部导航并在向下滚动时隐藏它，当工具栏隐藏时。
You can use a code like this:
您可以使用这样的代码：
var windowHeight = {
small: window.innerHeight,
middle: window.innerHeight,
big: window.innerHeight
}
window.addEventListener('resize', function(){
var currentHeight = window.innerHeight;
if (currentHeight < windowHeight.small) {
windowHeight.small = currentHeight;
}
if (currentHeight > windowHeight.big) {
windowHeight.big = currentHeight;
}
console.log('windowHeight.small', windowHeight.small, 'windowHeight.middle', windowHeight.middle, 'windowHeight.big', windowHeight.big, 'currentHeight', currentHeight);
if (currentHeight === windowHeight.big) {
transform(stickyNav, 'translate3d(0,120%,0)');
console.log('Hide bottom nav on big screen!');
} else if (currentHeight === windowHeight.middle) {
transform(stickyNav, 'translate3d(0,0,0)');
console.log('Show bottom nav on middle screen!');
} else {
transform(stickyNav, 'translate3d(0,-100%,0)');
console.log('Display bottom nav high up on smaller screen!');
}
})
The transform(stickyNav, 'translate3d(x,x,x)') function is a simple function taking in the bottom nav and then applying a transform in order to hide/display an item placed at the bottom.
transform(stickyNav, 'translate3d(x,x,x)') 函数是一个简单的函数，它接收底部导航，然后应用变换以隐藏/显示放置在底部的项目。
回答by Jess Jacobs
Thank Google, not me:
感谢谷歌，而不是我：
http://code.google.com/mobile/articles/webapp_fixed_ui.html
http://code.google.com/mobile/articles/webapp_fixed_ui.html
Pretty simple, actually.
其实很简单。
