Как узнать, когда в мобильном сафари видна нижняя навигационная панель?

Question

Поэтому у меня возникла проблема, когда нажатие на фиксированную кнопку внизу страницы перемещает страницу вверх, открывая нижнюю панель навигации в мобильном сафари, требуя повторного нажатия этой кнопки для работы. Добавление margin-bottom: 50px; к кнопке исправляет это, но когда страница прокручивается, поле становится немного больше, потому что навигационная панель скользит вниз.

с использованием safe-area-inset в качестве маржи не решает проблему. Использование его в качестве отступа исправляет его, но также растягивает элемент до самого нижнего края экрана

Я также попробовал следующий код, который должен удерживать панель навигации от скрытия. Это работает, но мешает вычислениям прокрутки окна и элементам фиксированного положения, поэтому это не решает мою проблему.

html,body{

height: 100%;

overflow-y: scroll;

-webkit-overflow-scrolling: touch;
}

Можно ли было бы узнать, когда нижняя навигационная панель видна / скрыта, используя javascript или jquery в мобильном сафари или какой-либо обходной путь для решения этой проблемы?

Answer 1

После МНОГО проб и ошибок я наконец-то нашел решение проблемы. Я работал над похожим веб-сайтом с заголовком внизу страницы вместо кнопки, но концепция похожа.

Заголовок анимируется при прокрутке страницы и исчезает после 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
            })
        }
    })
}
//======================================================================