如何在向下滚动时隐藏标题，并在向上滚动5倍（如google +）？
我试图让我的顶部导航栏在向下滚动至少5px后消失，并在快速向上滚动5px后重新出现。 与谷歌+标题非常相似。 我试过搜索任何教程，我尝试了一些js和jQuery方法，但我似乎无法让它们工作。 查看我的网站 。
HTML：
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/