尝试根据 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)') 函数是一个简单的函数,它接收底部导航,然后应用变换以隐藏/显示放置在底部的项目。