如何知道底部导航栏在移动 Safari 中何时可见？

Question

所以我遇到了这个问题，单击页面底部的固定按钮会向上滑动页面，露出移动 safari 中的底部导航栏，需要再次单击该按钮才能工作。向按钮添加 amargin-bottom: 50px;可以解决此问题，但是当页面滚动时，边距会有点多，因为导航栏会向下滑动。使用safe-area-inset作为保证金并不能解决问题。使用它作为填充可以修复它，但它也会将元素一直拉伸到屏幕底部我还尝试了以下代码，这应该可以防止导航栏隐藏。这可行，但它会扰乱窗口滚动计算和固定位置元素，因此它不能解决我的问题。html,body{height: 100%;overflow-y: scroll;-webkit-overflow-scrolling: touch;}有没有办法知道底部导航栏何时可见/隐藏，在 mobile safari 中使用 javascript 或 jquery 或任何解决方法来解决此问题？

Answer 1

经过大量的尝试和错误，我终于想出了解决问题的方法。我正在开发一个类似的网站，页面底部有一个标题而不是按钮，但概念是相似的。

当触发导航栏淡入或淡出窗口时，标题会在页面滚动时以动画方式进出，并在不活动 2.5 秒后淡入resize。如果正在使用移动 safari，则每次标题淡入且没有 right 时margin-bottom，都会添加边距。当导航栏出现时，边距将被删除，因此标题保留在导航栏的顶部，没有任何额外的边距。

继承人的代码：

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

            })

        }

    })

}

//======================================================================