Why is the menu JavaScript effect not working?

Question

I was developing a menu structure and tried to make it stay on the page even after scrolling down from top position. But it's not working, seems I am making a mistake but can't figure out what went wrong.

This is what I have in menu.js (the JavaScript file for menu effect):

$(function(){

var menu = $('#menu'),
    pos = menu.offset();

    $(window).scroll(function(){
        if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){
            menu.fadeOut('fast', function(){
                $(this).removeClass('default').addClass('fixed').fadeIn('fast');
            });
        } else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
            menu.fadeOut('fast', function(){
                $(this).removeClass('fixed').addClass('default').fadeIn('fast');
            });
        }
    });

});

Here is the link for the stylesheet: http://www.neo4evr.com/templates/splash1/css/style.css

Is there anything wrong in the JavaScript (menu.js)?

Answer 1

Your outer anonymous function is declared but not executed, so nothing really happens. In order to execute the outer function, you should change the last line into })();