jQuery 如何制作在向下滚动时消失但向上滚动时显示的导航？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17136513/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a navigation which disappears while scrolling down but shows up by scrolling up?
提问by Zach Starnes
I want to create a navigation bar that disappears when the user scrolls down the page but reappears when the user scrolls back up. Kind of like the search bar that is in the mobile chrome app. Does anyone know how to do so? All I have so far is a simple div that is fixed to the top.
我想创建一个导航栏，当用户向下滚动页面时会消失，但当用户向上滚动时会重新出现。有点像移动 chrome 应用程序中的搜索栏。有谁知道怎么做？到目前为止，我所拥有的只是一个固定在顶部的简单 div。
Here is an example- the navigtion only appears when the user scrolls up a little bit.
这是一个示例- 只有当用户向上滚动一点时才会出现导航。
采纳答案by Marc Audet
Prototype using jQuery
使用 jQuery 的原型
Here is one way you might do this.
这是您可以执行此操作的一种方法。
Suppose this your HTML, fixed header and some content:
假设这是您的 HTML、固定标题和一些内容：
<div class="header">The header or navigation elements go here...</div>
<div class="main">
<p>Some content...</p>
</div>
Your CSS might be:
你的 CSS 可能是：
.header {
position: fixed;
top: 0px;
left: 9px;
right: 9px;
height: 50px;
border: 1px dotted blue;
background-color: rgba(125, 125, 125, 0.5);
}
.main {
margin-top: 60px;
border: 1px solid blue;
width: 25%;
}
The jQuery to make this happen is as follows:
实现这一点的 jQuery 如下：
$(window).scroll(
{
previousTop: 0
},
function () {
var currentTop = $(window).scrollTop();
if (currentTop < this.previousTop) {
$(".sidebar em").text("Up"); /* optional for demo */
$(".header").show();
} else {
$(".sidebar em").text("Down");
$(".header").hide();
}
this.previousTop = currentTop;
});
Demo fiddle: http://jsfiddle.net/audetwebdesign/Mar62/
演示小提琴：http: //jsfiddle.net/audetwebdesign/Mar62/
How This Works
这是如何工作的
The trick is to compute whether your are scrolling up or scrolling down. You can do this by storing the previous value of the .scrollTopposition.
诀窍是计算您是向上滚动还是向下滚动。您可以通过存储.scrollTop仓位的先前值来做到这一点。
Define an anonymous JavaScript object with a single member to store the value:
定义一个带有单个成员的匿名 JavaScript 对象来存储值：
{
previousTop: 0
}
and pass that object to the jQuery .scroll()function.
并将该对象传递给 jQuery.scroll()函数。
When the window scrolls, get the current top position of the window scroll bar,
then compare it to the previous value, and then either show the header if
scrolling up or hide it if scrolling down.
当窗口滚动时，获取窗口滚动条的当前顶部位置，
然后将其与之前的值进行比较，然后向上滚动时显示标题或向下滚动时隐藏它。
After the show/hide decision, update the .previoustopwith the currentTopvalue.
在显示/隐藏决定之后，.previoustop用currentTop值更新。
No other plug in required. You can fade in/out the header or use some other animation instead of a simple show/hide.
无需其他插件。您可以淡入/淡出标题或使用其他动画代替简单的显示/隐藏。
回答by Mihai Vilcu
you mean like g+ does it ?
你的意思是像 g+ 吗？
you can use this plugin here ( https://github.com/brandonaaron/jquery-mousewheel) to detect the mousewheel event and take action based on that
您可以在此处使用此插件（https://github.com/brandonaaron/jquery-mousewheel）来检测鼠标滚轮事件并根据该事件采取行动
$('#my_elem').mousewheel(function(event, delta, deltaX, deltaY) {
console.log(delta, deltaX, deltaY);
});
there is also a test page here
还有一个测试页面点击这里
