Shrinking Sticky Navigation Bar

192
November 23, 2016, at 8:26 PM

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>

READ ALSO
Fixed footer if content is lesser than window height, relative footer if content is greater than window height, with ajax loaded content

Fixed footer if content is lesser than window height, relative footer if content is greater than window height, with ajax loaded content

I have tried to fix this problem for ages![nnn]When loading content with ajax dynamically, how can i guarentee that my footer is fixed to the bottom, if my loaded content is lesser than the window height, and vice versa, if my content is greater than the window...

173
How to get the cropped image from Instagram API?

How to get the cropped image from Instagram API?

Currently I get this image :.

459
Setting list order in given id sequence

Setting list order in given id sequence

I have made a list which can be sorted in any order. You can detach the elements of it and by clicking on the reset button you will get all the elements again in the default order.

315