ページの上部に表示される余白は正しくありませんか？

Question

私は私のページの上部にバーを持っていますが、最初にページをロードするときにバーがヘッダーをカバーします。右側の非表示のバーの矢印をクリックすると、ヘッダーが表示され、再表示の矢印をクリックすると、ヘッダーがバーの下にくるように余白が自動的にサイズ変更されます。

ページが読み込まれたときにバーが自動的に余白を作成しないのはなぜですか？任意のアイデア...これは私が使用しているJavaScriptとコードです。ウェブサイトもhttp://www.brightonorient.com

本当にありがとうございます！

<script type="text/javascript"> 
    var stub_showing = false; 

    function woahbar_show() { 
     if(stub_showing) { 
      $('.woahbar-stub').slideUp('fast', function() { 
      $('.woahbar').show('bounce', { times:3, distance:15 }, 100); 
      $('body').animate({"marginTop": "2.4em"}, 250); 
      }); 
     } 
     else { 
      $('.woahbar').show('bounce', { times:3, distance:15 }, 100); 
      $('body').animate({"marginTop": "2.4em"}, 250); 
     } 
    } 

    function woahbar_hide() { 
     $('.woahbar').slideUp('fast', function() { 
      $('.woahbar-stub').show('bounce', { times:3, distance:15 }, 100); 
      stub_showing = true; 
     }); 

     if($(window).width() > 1024) { 
      $('body').animate({"marginTop": "0px"}, 250); // if width greater than 1024 pull up the body 
     } 
    } 

    $().ready(function() { 
     window.setTimeout(function() { 
     woahbar_show(); 
    }, 5000); 
    }); 
</script> 



<div class="woahbar"> 
    <span> 
     Brighton Orient treats you to up to 25% off in honour of Mother's day! Ends midnight this Sunday, 18 March!! <a class="woahbar-link" href="http://www.brightonorient.com/events.html">Click here for details</a> 
    </span> 
    <a class="close-notify" onclick="woahbar_hide();"><img class="woahbar-up-arrow" src="woahbar-up-arrow.png"></a> 
</div> 
<div class="woahbar-stub" style="display:none"> 
    <a class="show-notify" onclick="woahbar_show();"><img class="woahbar-down-arrow" src="woahbar-down-arrow.png"></a> 
</div> 

Answer 1

style="margin-top: 2.4em;"は、バーの最初のrepop後にbody要素に追加されます。ボディCSSにそれを追加してみてください：

body { margin-top: 2.4em; } 

しかし、最初のanimateが起動しない理由を説明していないこと。 $(document).readyの代わりに$(window).loadを試してみてください。