Navigation menu fade in on scroll

Question

I'm designing a website and I'd like the navigation menu to fade in once I scroll down >50px. I'm using the following JavaScript with JQuery library:

(function ($) {
    $(document).ready(function () {

        $(window).scroll(function () {
            if ($(this).scrollTop() > 50) {
                $('.menu').fadeIn(500);
            } else {
                $('.menu').fadeOut(500);
            }
        });

    });
})(jQuery);

The class .menu is set on {display: none;} .

Answer 1

This should work

$(document).ready(function(){
       $(window).bind('scroll', function() {
       var distance = 50;
             if ($(window).scrollTop() > distance) {
                 $('nav').fadeIn(500);
             }
             else {
                 $('nav').fadeOut(500);
             }
        });
    });

Codepen Demo

Answer 2

It's working for me.

Your .menu is probably at the top of a page and when you scroll you can't see it.

Add to test:

.menu {
    position: fixed;
    z-index: 10000; //just to check if it is behind the content
}

DEMO

Answer 3

Try this:

$(document).ready(function () {
    $(window).scroll(function () {
        if ($(this).scrollTop() > 50) {
            $('.menu').fadeIn(1000);
        } else {
            $('.menu').fadeOut(1000);
        }
    });
});

Just corrected your code! It works fine!