Keep a hidden DIV Overlay off of the page when window is resized

JavaScript
1

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!