ページは 2 つの部分に分かれています。
- 大きな 100% ブラウザの高さのヘッダー
- メインコンテンツとフッター
これらのパーツの 1 つだけがブラウザに表示されます。Firefox と 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;
});
しかし IE では、ブラウザーの 100% の高さに対してフッターの後に大きなギャップがあります。ウィンドウのサイズを変更するたびに消えます。IEのバグのようです。解決策はありますか?