javascript - jQuery 调整窗口大小时，如何使隐藏的 DIV Overlay 远离页面？

Question

我遇到的问题是我有 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 应放置位置的功能。任何帮助表示赞赏!

Answer 1

如果您打算隐藏元素，您应该在 css 中的 display: none 和 display: block 之间切换。但是如果你真的需要让它们离开屏幕，你需要 3 个阵列。

• 数组 1 元素位置的开始。
• 数组 2 在 $(window).resize(function(){//你的代码获取新的当前位置 })
• 数组 3 比较数组 1 和数组 2 之间差异的数组

然而，正如@Pete 提到的那样，渲染一堆非常LARGE 的元素并不好。当你做类似的事情时

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

你刚刚做的是制作一堆(从你的代码的外观来看是 6 个)宽度为 100000px + 它们自己的宽度的非常大的叠加层，因为浏览器必须为这些元素呈现巨大的元素框边界。