Javascript 如何知道底部导航栏在mobile safari中何时可见？

因此，我遇到了这样一个问题：单击页面底部的固定按钮会将页面向上滑动，显示mobile safari中的底部导航栏，需要再次单击按钮才能工作。添加

页边距底部：50px到”按钮可解决此问题，但当页面滚动时，由于导航栏向下滑动，边距有点大

使用
安全区域插图
作为边距并不能解决问题。使用它作为填充可以修复它，但它也会将元素一直拉伸到屏幕底部

我还尝试了下面的代码，这是为了防止导航条隐藏。这是可行的，但它会干扰窗口滚动计算和固定位置元素，所以它不能解决我的问题

html,body{

height: 100%;

overflow-y: scroll;

-webkit-overflow-scrolling: touch;
}

在mobile safari中使用javascript或jquery或任何解决方案，有没有办法知道底部导航栏何时可见/隐藏？经过大量的尝试和错误，我终于找到了问题的解决方案。我在一个类似的网站上工作，页面底部有一个标题，而不是一个按钮，但概念是类似的

页眉会在页面滚动中设置进出动画，并在2.5秒不活动后淡入，
当导航条淡入或淡出窗口时，将触发
调整大小
。如果正在使用mobile safari，则每当标题淡入且没有右侧的
页边距底部时，就会添加页边距。当导航栏出现时，边距将被删除，因此页眉将保持在导航栏的顶部，没有任何额外的边距

查看其工作情况的视频：

代码如下：

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
            })
        }
    })
}
//======================================================================

var初始值=0；
var animateHeader=false；
//检查是否使用mobile safari[返回true为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.匹配（/CriOS/i）；
//===================================================
//这会使标题在滚动时淡入淡出，如果使用按钮，则可以忽略这一点===
函数headerAnimate（）{
var lastScrollTop=0；
varδ=200；
$（窗口）。关闭（“滚动”）。打开（“滚动”），功能（事件）{
如果（！$（“.box”）.hasClass（“显示”））{
var st=$（this.scrollTop（）；
if（Math.abs（lastScrollTop-st）lastScrollTop）{
$（“标题，#profilepopup，.search2 div”）.fadeOut（“快速”，“线性”，函数（）{
$（“#glassM”）.css（“字体大小”，“25px”）
$（“#glassM”）.attr（“类”、“fa搜索”）
})
}否则{
$（“标题”）.fadeIn（“快速”、“线性”）
}
clearTimeout（$.data（这是“滚动计时器”）；
$.data（此“滚动计时器”，setTimeout（函数（）{
$（“标题”）.fadeIn（“快速”、“线性”）
如果（iOSSafari&&animateHeader）{
$（“页眉”）.css（“页边距底部”，“2%”）。动画（{marginBottom:“60px”}）
}
}, 2500))
if（st=initial&&animateHeader==false）{
$（“标题”）.animate（{marginBottom:“60px”}）
animateHeader=true
}否则{
$（“header”）.animate（{marginBottom:“2%”），函数（）{
animateHeader=false
})
}
})
}
//======================================================================