Неверная длина страницы?

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;" добавлен к элементу кузова после первого упора бара. Попробуйте добавить его в CSS тела:

body { margin-top: 2.4em; } 

Однако это не объясняет, почему первая animate не срабатывает. Возможно, попробуйте $(window).load вместо $(document).ready?