收縮置頂導航欄

Question

我有我的網站下面的代碼爲我的導航欄：http://jsfiddle.net/faj0o4cq/

它沒有任何的margin-top部分的偉大工程，但是當我將它們添加它打破。看到這是如何工作的罰款：http://jsfiddle.net/faj0o4cq/1/

什麼我在我的JavaScript做錯了什麼？

$(function(){ 
 
     $('#header_nav').data('size','big'); 
 
    }); 
 

 
    $(window).scroll(function(){ 
 
     if($(document).scrollTop() > 0) 
 
     { 
 
      if($('#header_nav').data('size') == 'big') 
 
      { 
 
       $('#header_nav').data('size','small'); 
 
       $('#header_nav').stop().animate({ 
 
        height:'78px' 
 
       },600); 
 
       $('header nav').stop().animate({ 
 
        margin-top:'50px' 
 
       },600); 
 
      } 
 
     } 
 
     else 
 
     { 
 
      if($('#header_nav').data('size') == 'small') 
 
      { 
 
       $('#header_nav').data('size','big'); 
 
       $('#header_nav').stop().animate({ 
 
        height:'100px' 
 
       },600); 
 
       $('header nav').stop().animate({ 
 
        margin-top:'100px' 
 
       },600); 
 
      } 
 
     } 
 
    });

#header_nav { 
 
    background:blue; 
 
    height:100px; 
 
    position:fixed; 
 
    top:0 
 
} 
 

 
body { 
 
    height:9000px 
 
}

<header> 
 
<div id="header_nav"> 
 
    <nav>nav here</nav> 
 
</div> 
 
</header>

Answer 1

你必須用引號括margin-top。

每一次，如果涉及到JavaScript的東西不工作，檢查控制檯。它可能會給你一些提示什麼是錯的。

$(function(){ 
 
     $('#header_nav').data('size','big'); 
 
    }); 
 

 
    $(window).scroll(function(){ 
 
     if($(document).scrollTop() > 0) 
 
     { 
 
      if($('#header_nav').data('size') == 'big') 
 
      { 
 
       $('#header_nav').data('size','small'); 
 
       $('#header_nav').stop().animate({ 
 
        height:'78px' 
 
       },600); 
 
       $('header nav').stop().animate({ 
 
        'margin-top':'50px' 
 
       },600); 
 
      } 
 
     } 
 
     else 
 
     { 
 
      if($('#header_nav').data('size') == 'small') 
 
      { 
 
       $('#header_nav').data('size','big'); 
 
       $('#header_nav').stop().animate({ 
 
        height:'100px' 
 
       },600); 
 
       $('header nav').stop().animate({ 
 
        'margin-top':'100px' 
 
       },600); 
 
      } 
 
     } 
 
    });

#header_nav { 
 
    background:blue; 
 
    height:100px; 
 
    position:fixed; 
 
    top:0 
 
} 
 

 
body { 
 
    height:9000px 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header> 
 
<div id="header_nav"> 
 
    <nav>nav here</nav> 
 
</div> 
 
</header>