在 jQuery 滚动之后 scrolling/revealing 之前滚动隐藏导航 header

Question

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

我试图在分页序列开始之前隐藏我的菜单，然后菜单会显示在 header 中。目前，菜单始终可见。 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

感谢 Luke 提出先隐藏再显示的想法。这是我想出的解决方案。我使用就绪功能在加载时隐藏菜单，然后使用滚动功能在用户浏览页面后显示。

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

在 jQuery 滚动之后 scrolling/revealing 之前滚动隐藏导航 header

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

javascript

css

jquery

jquery-ui

jquery-scrollify