在使用jQuery滚动后滚动之前滚动隐藏导航标题/显示



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>

一开始就隐藏它,然后在after回调中显示它怎么样?

感谢卢克隐藏然后展示的想法。 这是我提出的解决方案。 我使用 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);
}
});

最新更新