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;"被添加到body元素中。尝试将其添加到body css：

body { margin-top: 2.4em; }

但是，这并不能解释为什么第一个animate不会触发。也许试试$(window).load代替$(document).ready？

页面顶部的保证金不正确？

1 个答案: