Javascript 当jQuery调整窗口大小时，如何使隐藏的DIV覆盖远离页面？

我的问题是，我有6个覆盖div，它们在页面加载时隐藏在页面之外。如果用户在浏览器最大化时加载页面，这将非常有效，div正好位于页面顶部之外。但是，如果浏览器以较小的窗口启动，然后用户更改窗口高度或使浏览器最大化，则隐藏的div将不再隐藏在页面顶部，并爬到页面顶部

这是我为DIV编写的CSS代码：

.Overlay {
position:absolute;
text-align:justify;
width:100%;
z-index:1;
background:#111111;
display:block;
opacity:0.9;
min-height:100%;
top: -100000px;
}

下面是计算div位置的jQuery，就在屏幕顶部：

var currentHeight1 = $('#Overlay1').outerHeight(true);
var currentHeight2 = $('#Overlay2').outerHeight(true);
var currentHeight3 = $('#Overlay3').outerHeight(true);
var currentHeight4 = $('#Overlay4').outerHeight(true);
var currentHeight5 = $('#Overlay5').outerHeight(true);
var currentHeight6 = $('#Overlay6').outerHeight(true);

$(document).ready(function() {   
$('#Overlay1').css({'top':-currentHeight1-50},function(){
});
$('#Overlay2').css({'top':-currentHeight2-50},function(){
});
$('#Overlay3').css({'top':-currentHeight3-50},function(){
});
$('#Overlay4').css({'top':-currentHeight4-50},function(){
});
$('#Overlay5').css({'top':-currentHeight5-50},function(){
});
$('#Overlay6').css({'top':-currentHeight6-50},function(){
});
});

我相当确定我需要一个利用

$(window).resize(function(){...})

---

但是，当浏览器窗口大小改变时，我似乎无法让函数重新计算div应该放在哪里。感谢您的帮助

如果要隐藏元素，则应在css中的display:none和display:block之间切换。但是，如果您真的需要将它们从屏幕上删除，则需要3个阵列

数组1元素在起始位置。 数组2在$window.resizefunction{//获取新当前位置的代码} 数组3比较数组1和数组2之间差异的数组 然而，正如@Pete提到的，渲染一堆非常大的元素是不好的。当你做这样的事情时

    min-height:100%;
    top: -100000px;

---

您刚才提到的是，从代码外观上生成一组6个非常大的覆盖，宽度为100000px+它们自己的宽度，因为浏览器必须为这些元素渲染巨大的元素框边界。

这背后的原因是什么？你能不能先将它们设置为display:none，然后在加载后向主体中添加一个类，并使用其他CSS来设置display:block，例如。loaded.Overlay{display:block；}。检查一下为什么你的排名不好，我不确定你使用它到底是为了什么，但不管它是个坏主意。正如@ClarkeyBoy所指出的，使用display:none，然后在需要时显示它$elem.show和$elem.hide。如果它是主体的子元素，或者您想要的任何容器（如果正好在上面），请使用position:absolute；底部：100%；这将实现将元素的底部正好放在屏幕上方的目标。如果您可以提供更明确的用途，可能会有其他或更好的替代方案。