移动滚动条上固定元件底部的透明开口

Question

It's hard for me to explain this, but I currently have a fixed item at the bottom of the page, and it disappears once the user scrolls to the bottom of the site, showing another div with a large amount of text. Once the user starts scrolling back to the top of the site, the fixed element re-appears at the bottom of the screen. The position of the fixed element is set to "bottom:0".

Unfortunately, sometimes, when the user scrolls up there is a transparent box about 20px in height below the fixed item. You can see the elements on the page that would appear underneath the fixed element, but the fixed element stays on top.

When I click on this blank space, the Google search bar appears. Is the Google search bar the thing that is causing the transparent box below the fixed element? What else could it be? This does not happen on Developer tools emulators, only on actual phones.

Here is an image below:

Here is my 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

this occurred due to the address bar appearing and disappearing. It changes the calculated window.height(). All I did was add an overflow-y: visible instea of overflow-y: scroll in my css, and added a background color. This covers up the transparent area, though it does make the height of the fixed element sort of variable.