如何在向下滚动时隐藏标题，并在向上滚动5倍时显示标题(如google +)? [英] How can you make a header hide on scroll down, and appear on scroll up 5x (like google+)?
问题描述
我正在尝试使我的顶部导航栏在向下滚动至少5像素后消失，并在快速向上滚动5像素后重新出现.与Google+标头非常相似.我尝试过搜索任何教程，并且尝试过一些js和jQuery方法，但似乎无法使它们正常工作.在我的网站中查看.
I'm trying to make my top navigation bar disappear after scrolling down at least 5px, and reappear after scrolling up 5px fast. Very similar to google+ header. I've tried searching for any tutorials, and I've tried some js and jQuery methods but I can't seem to get them to work. View at 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从那里渲染更改:
Didn't look too deep into how it was implemented on their end. You could use a combination of tracking the scroll position and rendering changes from there with 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类:
And you'll have to add css class:
#topNav.hidden {
display: none;
}
在此处查看其运行情况: http://jsfiddle.net/frZ9j/
See it in action here: http://jsfiddle.net/frZ9j/
这篇关于如何在向下滚动时隐藏标题，并在向上滚动5倍时显示标题(如google +)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
