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

Question

所以我遇到了这个问题，点击页面底部的固定按钮会使页面向上滑动，显示移动 safari 中的底部导航栏，需要再次点击该按钮才能工作。向按钮添加 margin-bottom: 50px; 可以解决此问题，但是当页面滚动时，边距有点多，因为导航栏向下滑动。

使用 safe-area-inset 作为边距并不能解决问题。使用它作为填充修复它，但它也将元素一直延伸到屏幕底部

我还尝试了以下代码，这应该可以防止导航栏隐藏。这行得通，但它扰乱了 window 滚动计算和固定位置元素，因此它不能解决我的问题。

html,body{

height: 100%;

overflow-y: scroll;

-webkit-overflow-scrolling: touch;
}

在移动 safari 中使用 javascript 或 jquery 是否有任何方法可以知道底部导航栏何时为 visible/hidden 或解决此问题的任何解决方法？

Answer 1

经过大量的反复试验，我终于找到了解决问题的方法。我在一个类似的网站上工作，页面底部有一个 header 而不是按钮，但概念相似。

header 在页面滚动时动画进出并在 2.5 秒不活动后淡入，当导航栏淡入或淡出时，触发 window resize。如果正在使用移动 safari，那么每次 header 淡入并且它没有正确的 margin-bottom 时，就会添加边距。当导航栏出现时，边距被移除，因此 header 保持在导航栏顶部，没有任何额外的边距。

观看它工作的视频：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
            })
        }
    })
}
//======================================================================

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

How to know when bottom nav-bar is visible in mobile safari?

html

javascript

css

jquery

webkit