Scrollify hiding navigation header before scrolling/revealing after scroll with jQuery

Question

https://gist.github.com/flyspaceage/ca0759d155c6c79786b7cb27a15f3629

I am trying to hide my menu until the pagination sequence begins, then the menu would reveal inside the header. Currently, the menu is always visible. The HTML structure is below, while the script is attached as a gist.

<header>
<ul class="pagination">
            <li>
                <a class="" href="#intro">
                    Top
                </a>
            </li>
            <li>
                <a class="" href="#breaking-away">
                    Breaking Away
                </a>
            </li>
            <li>
                <a class="" href="#why-right-now">
                    Why Right Now
                </a>
            </li>
            <li>
                <a class="" href="#testimonials">
                    Testimonials
                </a>
            </li>
            <li>
                <a class="" href="#deep-dive">
                    Deep Dive
                </a>
            </li>
        </ul>
</header>

Answer 1

Thanks Luke for the idea to hide and then show. Here is what I came up with as a solution. I used the ready function to hide the menu on load, and then the scroll function to reveal after the user navigates the page.

/*** Hide Navigation Bar on Load ***/
$( document ).ready(function(){
    $(".pagination").css({"display": "none", "visibility": "hidden"});
});

/*** Show Navigation on Scroll ***/
$( document ).scroll(function(){
    $(".pagination").css({"display": "all", "visibility": "visible"});
        if ($(this).scrollTop()==0) {
            $('.pagination').fadeOut(0.2);
        }
        else {
            $('.pagination').fadeIn(0.5);
        }
});