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-y：在我的CSS中滚动，并添加了背景颜色。这掩盖了透明区域，但它确实使固定元素的高度变化。

移动卷轴上固定元件底部的透明开口

1 个答案: