Javascript isn't working in Firefox/IE but works in Chrome

Question

For some reason my nav collapse function isn't working in Firefox/IE but works in Chrome.

<script type="text/javascript">
    $(function(){
        $('#header').data('size','big');
    });

    $(window).scroll(function(){
        var $nav = $('#header');
        if ($('body').scrollTop() > 0) {
            if ($nav.data('size') == 'big') {
                $('#logo').fadeOut(300);
                $nav.data('size','small').stop().animate({
                    height:'95px'
                }, 600);
            }
        } else {
            if ($nav.data('size') == 'small') {
                $('#logo').fadeIn(300);
                $nav.data('size','big').stop().animate({
                    height:'185px'
                }, 600);
            }  
        }
    });
</script>

Any ideas? I'm thinking it's a syntax error.

You can see the live example in the navigation at http://medialimes.com

Answer 1

Try using $(window).scrollTop() instead of $('body').scrollTop() . This should work on both Chrome and Firefox/IE.

Answer 2

My guess is that when you try to set

$('#header').data('size','big') 

doesn actually set the data variable properly.

Try setting it using the attr method.

$(#header).attr('size','big');