Question

我遇到的问题是我有6个叠加DIV，它们在加载时会隐藏在页面之外。如果用户在浏览器最大化时加载页面，这可以很好地工作，DIV位于页面顶部。但是，如果使用较小的窗口启动浏览器，然后用户更改窗口的高度（或最大化浏览器），则隐藏的DIV不再隐藏在顶部之外，并且会爬到页面顶部。 / p>

这是我为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;
}

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

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(){ // your code to get new current position })
阵列3是一个比较阵列1和阵列2

然而，正如@Pete所说，渲染一堆非常 LARGE 元素并不好。当你做

之类的事情

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

你刚刚失败的是制作了一堆（代码外观中的6个）非常大的叠加层，宽度为100000px +它们自己的宽度，因为浏览器必须为这些元素渲染巨大的元素框边界。 / p>

如何在窗口调整大小jQuery时保持隐藏的DIV Overlay离开页面？

1 个答案: