Question

我试图确定浏览器的实际高度与jQuery中的屏幕高度的关系。出于某种原因，读数远非准确，我想知道原因。

基本上我遇到的问题是

window.innerHeight和window.outerHeight总是完全相同，即使显示标签栏并且2 ...之间存在明显（视觉）差异...
上述每个读数始终小于screen.height和screen.availHeight。我的印象是，如果浏览器最大化而不是全屏而不是尺寸与最小化相比，情况不应该如此？

我的要求是当该元素到达浏览器视口的顶部时，更改window.scroll事件上的元素的类。但是，如果浏览器窗口的大小不是最大化或全屏，我也被要求更改为其他类。

这里是执行此操作的代码，但是，如上所述，＆＃34;最大化＆＃34;如果陈述永远不是真的......为什么？

function SetFloatingDivCheck(ContainerName, StartingClassName, FixedClassNameSized, FixedClassNameMaximized) {
$(document).ready(function () {
    var ElemY = $('#' + ContainerName).offset().top - parseFloat($('#' + ContainerName).css('margin-top').replace(/auto/, 0));
    $(window).scroll(function () {
        var YPosition = $(window).scrollTop();

        if (YPosition >= ElemY) {
            $('#' + ContainerName).removeClass(StartingClassName);
            //the following alert/debug shows this: 1050, 949, 949, 1010 when fired.
            //alert("screen.height = " + screen.height.toString() + "\nwindow.innerHeight = " + window.innerHeight.toString() + "\nwindow.outerHeight = " + window.innerHeight.toString() + "\n screen.availHeight = " + screen.availHeight.toString());

            if (screen.height == window.outerHeight || screen.availHeight == window.outerHeight)
            {

                $('#' + ContainerName).addClass(FixedClassNameMaximized);
            }
            else
            {
                $('#' + ContainerName).addClass(FixedClassNameSized);
            }
        }
        else {
            $('#' + ContainerName).removeClass(FixedClassNameSized);
            $('#' + ContainerName).removeClass(FixedClassNameMaximized);
            $('#' + ContainerName).addClass(StartingClassName);
        }
    });

});
}

Answer 1

您的测试被窃听。您的提醒状态为window.outerHeight = " + window.innerHeight.toString()

jQuery浏览器高度不准确

1 个答案: