Overflow Breaking ScrollTop / Not Registering Scroll

Question

I have some CSS-driven parallax scrolling on my site, and I would also like to have a fixed top navigation bar appear when the user begins to scroll down the page. Currently, the nav bar only appears after you have scrolled PAST the end of the window (and disappears again when the window has "rubber banded" back into position). I'm using Chrome v38 on a Macbook. It looks like the overflow-x in my CSS is causing the scroll not to register/fire, but that's necessary for the parallax effect. Any help would be appreciated. Thanks.

CodePen example: http://codepen.io/anon/pen/jEPqYL (doesn't work exactly like in a browser, but that is my current code.)

My JS is:

(function($) {
$(document).ready(function() {
    $(window).scroll(function() {
        if ($(this).scrollTop() > 0) {
        $('#header').fadeIn(500);
            } else {
            $('#header').fadeOut(500);
        }                   
        });
    });
})(jQuery);