使用jQuery滾動后滾動/顯示之前，滾動隱藏隱藏的導航標題

Question

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

我試圖隱藏我的菜單，直到分頁序列開始，然后菜單才會在標題內顯示。 當前，菜單始終可見。 下面是HTML結構，而腳本是根據要點附加的。

<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

首先隱藏它，然后在after回調中顯示它如何？

Answer 2

感謝盧克提出隱藏然后顯示的想法。 這是我想出的解決方案。 我使用了ready函數來隱藏加載時的菜單，然后使用滾動功能在用戶瀏覽頁面后顯示出來。

/*** 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);
        }
});