调整窗口大小jQuery时，如何使隐藏的DIV叠加层不显示在页面上？

Question

The problem i have is that i have 6 overlay DIVs which are hidden just off of the page as it loads. If the user loads the page when the browser is maximised, this works perfectly, the DIVs are position just off the top of the page. However if the browser is started with a smaller window, and then the user changes the height of the window (or maximises the browser) the hidden DIVs are no longer hidden off of the top, and creep on to the top of the page.

This is the CSS code i have written for the DIV:

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

And here is the jQuery that calculates the position of the div, just off the top of the screen:

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(){
});
});

I am fairly certain that i need to have a function that utilises

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

However, i cannot seem to get the function to recalculate where the DIVs should be placed when the browser window size is changed. Any help appreciated!

Answer 1

If your intention is to hide the elements you should toggle between display: none and display: block in css. But if you really needed to get them off screen you would need 3 arrays.

• Array 1 element position in the start.
• Array 2 for where they are after $(window).resize(function(){ // your code to get new current position })
• Array 3 an array that compares the difference between Array 1 and Array 2

However as @Pete mentioned it's not good to render a bunch of very LARGE elements. When you do something like

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

What you've just down is make a bunch of (6 from the looks of your code) very large overlays with a width of 100000px + their own width since the browser has to render huge element box boundaries for such elements.