我试图确定浏览器的实际高度与 jQuery 中屏幕高度的关系。出于某种原因,读数远非准确,我想知道为什么。
基本上我遇到的问题是
window.innerHeight
和window.outerHeight
始终完全相同,即使正在显示标签栏并且两者之间存在明显(视觉)差异...- 以上每个读数总是小于
screen.height
和screen.availHeight
。我的印象是,如果浏览器是最大化、全屏、大小还是最小化,情况就不应该是这样吗?
我的要求是在元素到达浏览器视口(viewport)顶部时更改 window.scroll
事件中元素的类。但是,如果浏览器窗口的大小不是最大化或全屏,我也必须更改为不同的类。
下面是执行此操作的代码,但是,正如我上面提到的,“最大化”if 语句永远不会为真...为什么?
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);
}
});
});
}
最佳答案
您的测试有问题。您的警报状态 window.outerHeight = "+ window.innerHeight.toString()
关于javascript - jQuery 浏览器高度不准确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29850717/