縮小粘性導航欄

Question

我的導航欄在我的網站上有以下代碼： http : //jsfiddle.net/faj0o4cq/

它在沒有任何margin-top部分的情況下都很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>