缩小粘性导航栏

Question

I have the following code on my site for my nav bar: http://jsfiddle.net/faj0o4cq/

It works great without any of the margin-top parts, but when I add them in it breaks. See how this works fine: http://jsfiddle.net/faj0o4cq/1/

What am I doing wrong in my 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

You have to enclose margin-top in quotation marks.

Every time, if something related to JavaScript does not work, check the console. It may give you some hints on what is wrong.

 $(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>