在页面滚动上显示第二个导航

Question

我的网站上有两个导航，它们都在顶部并且基本上做同样的事情。

我希望当页面最初加载并且尚未滚动时，主（较小）导航会显示在页面上。

一旦页面滚动并且主导航不再可见，我希望显示辅助导航（更大）并固定到页面顶部。

我已经完成了固定到顶部的部分，我只需要帮助处理页面滚动部分的淡入淡出。

主导航的ID为：navMain

第二次导航的ID为：navSecondary

我在Stackoverflow上发现了这个脚本，但它似乎并没有完全符合我的要求。

$(window).scroll(function() {
    var pxFromBottom = 350;
    if ($(window).scrollTop() + $(window).height() > $(document).height() - pxFromBottom) {
        $('#navSecondary').fadeOut('slow');
    } else {
        $('#navSecondary').fadeIn('slow')
    }
});

此脚本允许两个导航菜单在页面最初加载时同时显示，一旦滚动页面，辅助导航就会消失，即使您滚动回页面顶部也不会返回。

如果您愿意，可以在这里看到完全我在说什么：

http://www.green-panda.com/contact.php