![](/img/trans.png)
[英]Teehan & Lax hide header with javascript — Hiding on scroll down, revealing on scroll up
[英]Scrollify hiding navigation header before scrolling/revealing after scroll with 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);
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.