我试图让我的顶部导航栏在向下滚动至少 5 像素后消失，并在快速向上滚动 5 像素后重新出现。与 google+ header 非常相似。我试过搜索任何教程，我试过一些 js 和 jQuery 方法，但我似乎无法让它们工作。查看My Site .
HTML:
<body>
<div class="gridContainer clearfix">
<nav id="topNav" class="fluid">
<ul class="fluid fluidList navSystem">
<li class="fluid navItem"><a href="#" title="Web">Web</a></li>
<li class="fluid navItem"><a href="#" title="Photos">Photos</a></li>
<li class="fluid navItem"><a href="#" title="Videos">Videos</a></li>
<li class="fluid navItem"><a href="#" title="Music">Music</a></li>
<li class="fluid navItem"><a href="#" title="People">People</a></li>
<li class="fluid navItem"><a href="#" title="Places">Places</a></li>
<li class="fluid navItem"><a href="#" title="Shopping">Shopping</a></li>
<li class="fluid navItem"><a href="#" title="More">More...</a></li>
</ul>
</nav> <!-- END #topNav -->
<header id="header" class="fluid">
</header> <!-- END header -->
</div> <!-- END .gridContainer -->
</body>
CSS:
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 100%;
clear: none;
float: none;
}
#topNav {
overflow: hidden;
width: 100%;
height: 29px;
margin-left: auto;
margin-right: auto;
position: fixed;
top: 0;
left: 0;
background-color: #2D2D2D;
z-index: 999;
}
#header {
position: relative;
width: 100%;
height: 44px;
position: fixed;
background-color: #D2D2D2;
}
最佳答案
没有太深入地研究它是如何在他们端实现的。您可以结合使用 js 跟踪滚动位置和渲染更改:
var scroll_pos = 0;
var scroll_time;
$(window).scroll(function() {
clearTimeout(scroll_time);
var current_scroll = $(window).scrollTop();
if (current_scroll >= $('#topNav').outerHeight()) {
if (current_scroll <= scroll_pos) {
$('#topNav').removeClass('hidden');
}
else {
$('#topNav').addClass('hidden');
}
}
scroll_time = setTimeout(function() {
scroll_pos = $(window).scrollTop();
}, 100);
});
而且你必须添加 css 类:
#topNav.hidden {
display: none;
}
在此处查看实际效果:http://jsfiddle.net/frZ9j/
关于javascript - 如何使标题在向下滚动时隐藏，并在向上滚动 5 倍时显示(如 google+)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17870659/