移动滚动上固定元素底部的透明开口答案

【问题标题】：Transparent opening at bottom of fixed element on mobile scroll移动滚动上固定元素底部的透明开口
【发布时间】：2016-10-27 16:37:31
【问题描述】：

我很难解释这一点，但我目前在页面底部有一个固定项目，一旦用户滚动到网站底部，它就会消失，显示另一个包含大量文本的 div。一旦用户开始滚动回到网站顶部，固定元素会重新出现在屏幕底部。固定元素的位置设置为“bottom:0”。

不幸的是，有时，当用户向上滚动时，固定项目下方会出现一个高约 20 像素的透明框。您可以在页面上看到将出现在固定元素下方的元素，但固定元素仍位于顶部。

当我点击这个空白区域时，会出现 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);
}

【问题讨论】：

请在 jsfiddle 或 codepen 上分享网站的代码和 css 以获得更好的理解和帮助。
我认为这与我在收缩/扩展 div 的功能之一中使用“mobile-isi-container”的高度有关。
可能是。但是我们无法在移动设备上检查这一点，因为没有指向网站或 jsfiddle 等的链接。您能否提供指向包含此代码和问题的页面的链接，我们可以在移动设备上检查并查看问题所在？
不幸的是，我不得不创建一个单独的假页面，这需要一些时间。如果涉及到，我会的，否则感谢您的帮助。
大家好，这是由于地址栏出现和消失造成的。它改变了计算的 window.height()。我所做的只是在我的 css 中添加一个 overflow-y: visible instea of overflow-y: scroll，并添加一个背景颜色。这覆盖了透明区域。

标签： javascript android jquery html css

【解决方案1】：

这是由于地址栏出现和消失造成的。它改变了计算的 window.height()。我所做的只是在我的 css 中添加一个 overflow-y: visible instea of overflow-y: scroll，并添加一个背景颜色。这覆盖了透明区域，尽管它确实使固定元素的高度发生了变化。

【讨论】：