缩小粘性导航栏

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>