所以我有这个问题,单击页面底部的固定按钮会使页面向上滑动,从而显示出移动浏览器中的底部导航栏,需要再次单击该按钮才能工作。在按钮上添加margin-bottom: 50px;
可以解决此问题,但是在滚动页面时,由于导航栏向下滑动,因此页边距有点大。
使用safe-area-inset
作为余量不能解决问题。将其用作填充可修复它,但也可将元素一直拉伸到屏幕底部
我还尝试了以下代码,这应该是为了防止导航栏被隐藏。此方法有效,但与窗口滚动计算和固定位置元素混淆,因此无法解决我的问题。
html,body{
height: 100%;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
是否有任何方法可以知道何时使用移动浏览器中的javascript或jquery或是否可以解决此问题来隐藏/隐藏底部导航栏?
页眉在页面滚动中进行动画显示,在闲置2.5秒后消失,当导航栏淡入或淡出时,将触发窗口resize
。如果正在使用移动浏览器,则每当标题淡入并且没有正确的margin-bottom
时,都会添加边距。当导航栏出现时,页边空白被删除,因此页眉停留在导航栏的顶部,没有任何多余的空白。
观看它的视频:https://streamable.com/sc20h
此处为代码:
var initial = 0;
var animateHeader = false;
//check if using mobile safari [returns true is mobile safari] =====
var ua = window.navigator.userAgent;
var iOS = !!ua.match(/iPad/i) || !!ua.match(/iPhone/i);
var webkit = !!ua.match(/WebKit/i);
var iOSSafari = iOS && webkit && !ua.match(/CriOS/i);
//===================================================
//This fades the header in and out on scroll, this can be ignored if working on a button===
function headerAnimate() {
var lastScrollTop = 0;
var delta = 200;
$(window).off("scroll").on("scroll", function (event) {
if (!$(".box").hasClass("showing")) {
var st = $(this).scrollTop();
if (Math.abs(lastScrollTop - st) <= delta)
return;
if (st > lastScrollTop) {
$("header, #profilepopup, .search2 div").fadeOut("fast", "linear", function () {
$("#glassM").css("font-size", "25px")
$("#glassM").attr("class", "fa fa-search")
})
} else {
$("header").fadeIn("fast", "linear")
}
clearTimeout($.data(this, 'scrollTimer'));
$.data(this, 'scrollTimer', setTimeout(function () {
$("header").fadeIn("fast", "linear")
if(iOSSafari && animateHeader){
$("header").css("margin-bottom", "2%").animate({ marginBottom: "60px" })
}
}, 2500))
if (st <= 600 && $("#search").is(":visible")) {
$("#glassM").css("font-size", "30px")
$("#glassM").attr("class", "fa fa-times")
}
lastScrollTop = st;
}
});
}
//==================================================================
//this is where the magic happens=====================
if (iOSSafari) {
initial = $(window).height()
$(window).resize(function () {
if ($(window).height() >= initial && animateHeader === false) {
$("header").animate({ marginBottom: "60px" })
animateHeader = true
} else {
$("header").animate({ marginBottom: "2%" }, function () {
animateHeader = false
})
}
})
}
//======================================================================