所以我遇到了這個問題，單擊頁面底部的固定按鈕會向上滑動頁面，露出移動 safari 中的底部導航欄，需要再次單擊該按鈕才能工作。向按鈕添加 amargin-bottom: 50px;可以解決此問題，但是當頁面滾動時，邊距會有點多，因為導航欄會向下滑動。使用safe-area-inset作為保證金并不能解決問題。使用它作為填充可以修復它，但它也會將元素一直拉伸到屏幕底部我還嘗試了以下代碼，這應該可以防止導航欄隱藏。這可行，但它會擾亂窗口滾動計算和固定位置元素，因此它不能解決我的問題。html,body{height: 100%;overflow-y: scroll;-webkit-overflow-scrolling: touch;}有沒有辦法知道底部導航欄何時可見/隱藏，在 mobile safari 中使用 javascript 或 jquery 或任何解決方法來解決此問題？
1 回答
紅顏莎娜
TA貢獻1842條經驗 獲得超13個贊
經過大量的嘗試和錯誤，我終于想出了解決問題的方法。我正在開發一個類似的網站，頁面底部有一個標題而不是按鈕，但概念是相似的。
當觸發導航欄淡入或淡出窗口時，標題會在頁面滾動時以動畫方式進出，并在不活動 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
? ? ? ? ? ? })
? ? ? ? }
? ? })
}
//======================================================================
- 1 回答
- 0 關注
- 141 瀏覽
添加回答
舉報
0/150
提交
取消