The layout of the page is split into two main sections:
- A large header that takes up 100% of the browser height
- The main content area and footer
When viewing the page in a browser, only one of these sections will be visible. The following code works well in both Firefox and Chrome:
var $header = $('.mainHeader');
var $main = $('.main');
var $footer = $('.mainFooter')
var $body = $('body');
$('#tosite').on('click', function(e){
$body.css({overflow: 'auto'});
$main.show();
$footer.show();
$([$header, $main, $footer]).each(function(n){
var $this = $(this);
$this.animate({top: -$window.outerHeight()}, 400, 'linear', function(){
if (n == 0) {
$this.hide();
}
$this.css({top:0});
$this.css('position', 'relative');
});
});
e.preventDefault();
return false;
});
$('#back').on('click', function(e){
$body.css({overflow: 'hidden'});
$([$header, $main, $footer]).each(function(n){
var $this = $(this);
$this.css({top: -$window.outerHeight()}).show();
$this.animate({top: 0}, 400, 'linear', function(){
if (n > 0) {
$this.hide();
}
});
});
e.preventDefault();
return false;
});
However, when viewed in Internet Explorer, there is a significant gap after the footer, equal to 100% of the browser height. This gap disappears when the window is resized, indicating a potential bug in IE. Is there a workaround or solution for this issue?