我有一个栏,通过使用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;
来修复此问题。
我只是做了这样的事情,将导航粘贴到窗口的TOP。 导航从标题下方开始,如果您滚动经过它,导航就会粘住。 iOS5确实支持固定定位。 该项目将捕捉到滚动结束后AFTER的位置,但仍然运行良好。
'#sticky-anchor'
是我的导航的包装 div。
不记得我在哪里找到了所有这些,从很多网站上得到了一些小片段。 您可以根据您的需要进行调整。
$(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 上回答了这个问题。从那时起,我从实施它的人们那里得到了很多感谢。抱歉我没有时间总结。
这段 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;
我认为设置高度有助于正确渲染,在桌面浏览器上我希望将此菜单固定到浏览器窗口的底部。
尝试根据 window.innerHeight 隐藏/显示 iPhone 上的底部固定导航。每当显示工具栏时(通常是向上滚动时),您可以显示底部导航栏,并在向下滚动时隐藏它,当工具栏隐藏时。
您可以使用这样的代码:
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!');
}
})
transform(stickyNav, 'translate3d(x,x,x)') 函数是一个简单的函数,它接受底部导航,然后应用变换以隐藏/显示放置在底部的项目。
我记得使用
position: sticky; bottom: 0;
解决高度为零的容器元素,然后使用 position: absolute; bottom: var(--how-much-space-u-like-below-bottom-of-screen-and-fixed-element);
解决您想要固定到视口底部的实际内容。我相信它至少在 iOS Safari 15 和 16 上解决了这个问题。
<div class="sticky-container" style="position: sticky; bottom: 0;">
<div class="fixed-to-bottom" style="position: absolute; bottom: 1rem;">
<button>hello world</button>
</div>
</div>
我用过 paddingBottom:'env(安全区域插入底部)',
iScroll 可能是解决您问题的最简单方法。与您的想法相反,它也适用于 Android 和 Opera。它的新版本表现出色。