移動滾動條上固定元件底部的透明開口

Question

我很難解釋這一點，但是我目前在頁面底部有一個固定項目，一旦用戶滾動到網站底部，它就會消失，並顯示另一個包含大量文本的div。 用戶開始滾動回到站點頂部后，固定元素將重新出現在屏幕底部。 固定元素的位置設置為“ bottom：0”。

不幸的是，有時，當用戶向上滾動時，在固定項目下方會出現一個透明框，其高度約為20px。 您可以在頁面上看到固定元素下方顯示的元素，但固定元素仍位於頂部。

當我單擊此空白區域時，將顯示Google搜索欄。 Google搜索欄是否是導致固定元素下方的透明框出現的原因？ 還有什么呢？ 在開發人員工具仿真器上不會發生這種情況，僅在實際的電話上會發生。

這是下面的圖像：

這是我的JS：

$(".mobile-isi-expand").click( function (){
    var topMenuHeight = $('.mobile-top-menu').height();
    var documentHeight = $('#pageContent').height();
    var screenHeightSans = $(window).height();

    console.log(topMenuHeight);
    console.log(documentHeight);
    var desiredExpandedHeight = topMenuHeight;
    var desiredContractedHeight = "150px";
    var deviceHeight = $(window).height();
    var regionContent = $(".region-content").height();
    if(documentHeight === null){
        documentHeight = screenHeightSans;
    }
    else {

    }
        if($(this).hasClass("mobile-expanded")) {
            $(this).removeClass("mobile-expanded");
            $(".mobile-isi-container").animate({
                "height":"150px",
                "bottom":"0",
                "top":deviceHeight - 150
            });
        }
        else {
            $(this).removeClass("mobile-isi-minimize");
            $(".mobile-isi-expand").addClass("mobile-expanded");
            $(".mobile-isi-container").animate({
                "top":desiredExpandedHeight,
                "height": documentHeight
            });
        }
});


$(function($) {
    if(Modernizr.mq('(max-width: 480px)')) {
        $(window).on('scroll', function() {
            var is_root = location.pathname == "/";
            var referenceHeight = $('.referenceArea').height();
            var pageContentHeight = $("#pageContent").height();
            var regionContent = $(".region-content").height();
            var refAndPageHeight = referenceHeight + pageContentHeight;


            if($(this).scrollTop() >= regionContent - 220) {
                $('.mobile-hidden-isi').addClass("mobile-active");
                $('.mobile-isi-container').css({"display":"none", "height": "150px"});
            }
            else {
                $('.mobile-hidden-isi').removeClass("mobile-active");
                $('.mobile-isi-container').css({"display":"block", "height": "150px", "bottom" : "0"});
                var mobileISIheight = $('.mobile-isi-container').height();
                console.log(mobileISIheight);
            }
        })
       }
       else {

       }
});

CSS：

.mobile-isi-container {
    position: fixed;
    bottom: 0;
    font-family: 'quicksandregular';
    left: 0;
    display: block;
    background-color: #fff;
    width: 100%;
    height: 150px;
    min-height: 150px;
    z-index: 999999;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    overflow-y: scroll;
    -webkit-box-shadow: 1px -1px 3px -1px rgba(64,62,64,1);
    -moz-box-shadow: 1px -1px 3px -1px rgba(64,62,64,1);
    box-shadow: 1px -1px 3px -1px rgba(64,62,64,1);
}

Answer 1

發生這種情況的原因是地址欄的出現和消失。 它將更改計算出的window.height（）。 我所做的就是添加一個y溢出：可見的instea：在我的CSS中滾動，並添加背景色。 盡管它確實使固定元素的高度可變，但它覆蓋了透明區域。